Article Directory
Preface-Level 1 Directory Analysis
After we use the Vue CLI 4.0 tool to create a new project, its most basic first-level directory structure is often like this:
vue-demo
├── dist //项目构建后的输出目录
├── node_modules
├── public
├── src
├── tests //选装：测试模块
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
├── ...
dist—— The default output directory after the project is built and packaged. View details ->node_modules—— Project dependency files, including many basic dependencies and dependencies installed by yourself. View details ->public—— The main entry file for storing public resources and projectsindex.html. View details ->src—— Project core folder: including project source code, various static resources, etc. It is the key work directory we developed. View details ->test—— Optional folder only if the test module (Unit Testing / E2E Testing) is installed. View details ->.gitignore—— File directories that need to be ignored when Git uploads; view details ->package-lock.json—— Documents used for version management;package.json—— The basic configuration information file of the project, including various plug-ins, dependencies, and detailed configuration of some dependencies (if you choose to save it in this file);README.md—— The description file of the project. View details ->...—— Some independent files that depend on configuration information. View details ->
1. dist
The dist folder does not exist at the beginning in the newly created project. It will only be created after you execute the build command (build) once. Usually its internal directory structure is:
vue-demo
├── dist //项目构建后的输出目录
│ └── css
│ └── img
│ └── js
│ └── index.html // 项目主入口文件
│ └── ... // 其他公共资源
This is the directory structure of the native development stage that we are familiar with before. It is also a file type that the browser can directly recognize . However, the projects developed by frameworks such as Vue.js we are currently using are not recognized by the browser, so we need to compile and package this step to convert them into the files required by the actual production environment (browser).
npm run build
The name of the directory folder can be set freely. For example, directly modify in Vue UI:
For the specific use of Vue UI, you can turn to the previous article:
2. node_modules
node_modulesStored in the folder are various project dependency files, including many basic dependencies and dependencies installed by yourself.
vue-demo
├── node_modules
│ └── ...
When doing code sharing or uploading remote warehouses, it is recommended to ignore this folder . So when we get a Vue project, we usually don't have this folder. We need to use the command to generate it ourselves:
npm install
Then he will download all the dependent files needed by the project. In addition to the basic dependency files, he will also identify package.jsonthe dependency information saved in our files and install them one by one.
After the project is developed, we can continue to add other dependencies as needed, and they will still be saved in the node_modulesfolder.
npm install [依赖包名称]
Three. Public
As the name implies, the publicpublic resources of the project are stored in the folder. For example, website LOGO, etc., there will be the main entry file of the project index.html. Usually we don't need to publicmake any changes to the resources in the folder.
vue-demo
├── public
│ └── index.html // 项目主入口文件
│ └── ... // 其他公共资源
When building and packaging later, the publiccontent of the file will be placed directly in the distfolder. such as:
4. src (basic version)
srcThe folder is the core folder of our project: including project source code and various static resources, etc. It is the key work directory we developed.
If at this time when your project was created, no other configuration was selected, and it was just the simplest blank project, then your src folder should look like this:
vue-demo
├── src
│ └── assets //静态资源
│ └── components //公共组件
│ └── App.vue //根组件
│ └── main.js //入口文件
The specific calling sequence between them can be briefly summarized as the following figure: 
This is also the most basic working principle of the Vue framework. In the future, other Vue ecological products or plug-ins can be added on this basis, such as Vue Router, Vuex or Element UI component library, etc.
4.1 main.js
main.jsThe file is a very important file and is the first entry file that the browser parses and loads. The main function of this file is to import various resources through import, and then create a new vue instance.
You can see that only two resources are imported here:
- Vue framework -
node_modulesimport from the folder; - Root component App -
App.vueimport from file;
Then create a new vue instance:
new Vue({
render: h => h(App), //渲染函数
}).$mount('#app') //手动挂载
render: h => h(App)The format of the rendering function belongs to the ES6 arrow function writing, and its ES5 equivalent form is:
render: h => h(App)
||
render(h){
return h(App);
}
In this Vue instance, the root component App is rendered through the h function, and it is manually mounted to #appthe node with id . The node is located in publicthe main entry file under the directory index.html.
Which < div id=“app”></div>will be replaced by the root component App, the so-called mount.
4.2 View app
So what is further loaded is the root component App file- App.vue. When we talked about getting started with the Vue framework, we mentioned that there is a very important core concept in the Vue framework:
- Component development -every Vue page can be seen as filled with components, and the components support hierarchical nesting.
The App component belongs to the root component, and the use of other components needs to be directly or indirectly introduced by the App component. Here we continue to introduce the following two resources:
- Picture
logo.png-located in thesrc / assetscatalog; - Common components
HelloWorld-located in thesrc / componentsdirectory;
4.3 src / assets
src / assetsStored in the folder are various static resources, such as css, img, js, font, etc. assetsThere is only one LOGO image resource on the homepage of the newly created project folder:
4.4 src / components
The components defined here are all public components and can be called (multiple times) in any Vue page. .vueThe file with the suffix is the component file, and each vue component usually consists of the following three parts:
<template>Tags-HTML template code snippets;<script>Tags-javascript code;<style>Tags-style code (native CSS / preprocessing language Sass, Less, Stylus);
You can see that the html, js, and css of the Three Musketeers in the original development are all integrated in one component file (the sparrow is small and complete). Such a development plan is undoubtedly very different from native development, so the final build and packaging is needed.
What we see after running this project is actually the content of public components HelloWorld:
Another point is that the child and parent components are used here to pass values. When the root component App calls the public component HelloWorld, it passes down a msg value:
Then the HelloWorldpublic component is received through the props method and rendered.
We can try to modify the value of msg and HelloWorldother content in the public component. such as:
// App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome ! zevin ."/>
</div>
</template>
// HelloWorld.vue
<template>
<div class="hello">
<h1>{
{
msg }}</h1>
</div>
</template>
The current page effect is like this~
5. src (top version)
The basic version just mentioned srcis excellent if used to understand the principles of the Vue framework, but it is definitely not enough in actual development. We will more or less use other products in the Vue ecosystem.
So there is a top version src, haha. The detailed directory structure is as follows:
vue-demo
├── src
│ └── assets //静态资源
│ └── components //公共组件
│ └── plugins //插件资源
│ └── router //路由配置
│ └── store //vuex文件
│ └── views //视图组件
│ └── App.vue //根组件
│ └── main.js //入口文件
Compared with the basic version, you will find that there are four more folders:
plugins—— Plug-in resources;router—— Routing configuration;store—— vuex file;views—— View component;
The call graph between the corresponding files should also be enriched. Please see the picture below:
Similarly, the main.jscontent of the file is different, and the resource items imported by import have increased:
And the corresponding content is also added to the Vue instance:
new Vue({
router, // 注册路由
store, // 引入store
render: h => h(App)
}).$mount('#app')
Next, please continue to look at the explanation of these four folders to help you understand this picture.
5.1 src / plugins
This folder is generated by manually installing plug-ins during your project development process. For example, I installed axios here:
5.2 src / store
The store folder is a file that will only be available after you have selected Vuex. It is mainly used to save certain states in the project. Such as state, mutations, actions, getters, modules, etc.
For a detailed explanation of Vuex, please see the follow-up update~
5.3 src / router
In a single-page application , routing refers to displaying different page views according to different links, which can be switched back and forth . As shown below:
Before looking at the src / routerfile, let's take a look at the root component App- App.vuethe changes in the file: public components are no longer directly called, but < router-view/>routes are referenced .
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
The specific principle of routing is:
According to the value <router-link>of the tofield in the label above , it determines <router-view/>which view component is mounted here.
The corresponding relationship of this route link is saved in the src/router/index.jsfile.
5.4 src / views
src / viewsThe view component is stored in the folder. New projects with Vue Router will have the following two view components by default:
Home.vue—— Home page;About.vue—— About the section;
And Home.vueyou can see the familiar App.vuetemplate content that is the same as the root component in the previous basic version . In this way, the idea of the previous basic version is connected~
6. tests
Optional folder for testing module (Unit Testing / E2E Testing). But I don’t have much research on the test myself, so I don’t make any trouble~
Seven. .gitignore
There is nothing to say about this, which is to list the files that need to be ignored when Git uploads later. The default .gitignorein the document summed up a lot, but we are free additions and deletions.
8. README.md
README.mdThe file is the description file of your project. Dispensable, it doesn't affect anything. Its role is:
When you upload as a Git remote warehouse resource, such as GitHub. He will parse the README.mdfiles in the root directory of your project and display them under your warehouse directory. It is convenient for others to quickly understand your project.
For example: the GitHub repository address of the vuepress-theme-vdoing project
Nine.… (other dependent independent configuration information files)
When you create a project, if you choose to rely configuration information is stored in a separate file form, then within your project, and package.jsonfiles at the same level, it will have such as .browserslistrc, .eslintrc, babel.config.js, jest.config.js, tsconfig.jsonand other independent configuration files.
Attachment: detailed directory structure tree
I am here to summarize the actual directory structure of a Vue project as completely as possible. For reference only, the specific directory structure is based on your actual situation.
vue-demo
├── dist //项目构建后的输出目录
├── node_modules
│ └── ... // 各类依赖
├── public
│ └── index.html // 项目主入口文件
│ └── ... // 其他公共资源
├── src
│ └── assets //静态资源
│ └── logo.png
│ └── components //公共组件
│ └── HelloWorld.vue
│ └── plugins //插件资源
│ └── axios.js
│ └── router //路由配置
│ └── index.js
│ └── store //vuex文件
│ └── index.js
│ └── views //视图组件
│ └── About.vue
│ └── Home.vue
│ └── App.vue //根组件
│ └── main.js //入口文件
├── tests //选装：测试模块
├── .gitignore //Git上传时需要忽略的文件列表
├── package-lock.json //版本管理使用的文件
├── package.json //项目的基本配置信息文件
├── README.md //项目的描述文件
├── ... //其他依赖的独立配置信息文件
Write at the end
In this article, the role of each directory structure in a standard Vue project is sorted out in detail. It's a general impression of the Vue project, and the specific development details have to be digging deeper. Come on! QAQ
Every day that I have never danced is a disappointment to life!
—— Nietzsche