Table of contents
1: What is a single page application?
4: Directory structure of vue project: Edit
5: Understand the structure of the src directory:
6: Running process of vue project
7: el: container name, and, $mount("container name")
1: What is a single page application?
Single Page Application: (Single Page Application) referred to as SPA, which means that there is only one html page in a web website, and all functions and interactions are completed in this page.
2: What is vue-cli
vue-cli is a tool developed by Vue.js, which simplifies the process of developers manually building Vue projects.
3: Install and use
4: Directory structure of vue project:
There are favicon.ico and index.html under the public package
favicon.icoicon
babel.config.js: File that manages babel configuration
package-lock.js: manages dependent files
5: Understand the structure of the src directory:
assets folder: stores static resource files used in the project, such as css style sheets, image resources
components folder: Reusable components encapsulated by programmers must be placed in the components directory.
main.js: It is the entry file of the project. To run the entire project, main.js must be executed first.
App.vue: It is the root component of the project (users can see whatever structure is defined).
6: Running process of vue project
When the vue project is started, the main.js file will be loaded first. The main.js file loads the App.vue file and renders the App.vue file into the index.html page.
1: App.vue is used to write the template structure to be rendered.
2: An el area needs to be reserved in index.html
3: main.js renders App.vue into the el area reserved by index.html (the structure in the el area will be overwritten by the rendered App.vue template structure).
7: el: container name, and, $mount("container name")
The effect is the same