Tip: After the article is written, the table of contents can be automatically generated. How to generate it can refer to the help document on the right
Article directory
foreword
提示：这里可以添加本文要记录的大概内容：
The front-end project built with vue and ue-cli is the choice of many enterprise projects, so it is very necessary to understand the structure of the project and how the project works, which will bring great help to our usual work.
提示：以下是本篇文章正文内容，下面案例可供参考
1. Vue.js directory structure
2. Project file introduction
1. src directory
- main.js is our entry file, the entry of the entire project, used for global configuration, the main function is to initialize the vue instance and use the required plug-ins.
import {
crearteApp } from 'vue';
import App from './App';
crearteApp(App).mount('#app'); //挂载方法，将vue的根实例挂载到id为'#app'的空间里去，从而实现数据双向绑定
2.App.view
- App.vue is our root component (the .vue component that uses tags to render the entire project), and all pages are switched under App.vue. In fact, you can also understand that all routes are also subcomponents of App.vue. So we marked router as a subcomponent of App.vue.
3.assets file
- assets put files that may change
- The files in the assets directory will be merged into one file and then compressed. It is mostly used to store business-level js, css, etc., such as some global scss style files, global tool js files, etc.
- Expansion: The assets directory can be divided into different subdirectories to store files according to your needs. For example, assets/util/ can be used to store tool js, assets/api/ can be used to store business interface js and so on.
- The files in the assets directory will be parsed into module dependencies by webpack, and only the path form (for example, in (
) is supported.
4. components file
- components: There is a component file in the directory, which can not be used. It is generally recommended to place reusable views in the src/components directory. Examples such as headers, footers, ads, grids or any custom controls like styled text boxes or buttons. One or more components can be accessed inside a view.
5.views folder
- The views folder is used to store "pages". A view can have one or more components, and a view is actually intended to be accessed by a navigation URL. They are usually placed in src/views.
6.router file (router and routing configuration)
Use vue-router to manage routing in the project, which is divided into the following steps
-
Step 1: Install vue-router in the terminal
npm install -g vue-router -
Step 2: Create a router folder in the src directory, create router.js under this folder (it can also be at the same level as main.js, directly create router.js), and configure the corresponding router.js file Information
-
Step 3: Introduce the routing instance router in the entry file main.js, and then register in the root instance
7. store folder
- store folder: store the state data in \vue, centralized management with vuex
8.public
- This folder can be used to store static resources. The things stored in this folder will not be affected by packaging, but will be output to the dist folder intact, which is the same as the static folder in vuecli2.
- publicc/index.html is a template file, and index.html is a general entry file, which is used to generate the entry file of the project.
- Vue is a single-page application. It hangs under the div whose id is app and then dynamically renders the routing template. There is only one div tag in the body of index.html, and its id is app. This id will be connected to the content of src/main.js , After all the compilation and packaging in src is in the app in index.html under public ic, the js and css packaged by webpack will also be automatically injected into the page. When our browser accesses the project, it will open the generated index.html by default.
When to use the public folder?
- You need to specify - a file name in the build output.
- You have thousands of images and need to dynamically reference their paths.
- Some libraries may not be compatible with webpack, in which case you have no choice but to include it in a separate script tag.
3. The overall operation process of the project
Order
index.html > js code outside the export of App.vue > main.js > js code inside the export of App.vue >