Previous been introduced to create a project based on vue-cli, project structure created in accordance with this introduction vue-cli official scaffolding projects.
First, look at the structure of FIG.
- build [webpack Configuration]
webpack configuration, have been configured, the main boot file is dev-server.js, when running "npm run dev" first start is dev-server.js, he will check node and npm version, and load the configuration file start the service.
- config [Vue project configuration]
1, the configuration dev.env.js project development environment.
2, index.js main configuration items (including listening port, packaging, path, etc.).
3, prod.env.js project production environment configuration
- the node_modules [dependencies]
node_modules project which is dependent on package, which includes a lot of basic dependence, you can also install other dependencies as needed. Installation open cmd, project into the directory, input npm install [dependencies Name], the transport.
In both cases we rely on their own to install:
(1) The lack of dependencies project operation: loading items e.g. external css css-loader will be used, like routing jump vue-loader (an example of installation methods: npm install css-loader)
(2) Plug: The VUX (WEUI mobile terminal based component library), vue-swiper (rotation plug)
Note: Sometimes installation dependencies specified version, the version number plus the required information, such as the installation of version 11.1.4 vue-loader in the name dependencies, input npm install [email protected]
- src [project core document]
1, assets static resources
Image Resources
2, components common components
Corresponding components
3, route routing (routing configuration items)
All routing rules
4, App.vue root component
A vue page usually has three parts: the template [template], js [javascript], style [style]
A, template template: template which can contain only one parent, which is the only one the top div.
< Template > < div ID = "App" > < IMG the src = "./ Assets / logo.png" > < div > This is a test HTML </ div > < Router-View /> </ div > </ Template >
<Router-view> </ router-view> is a view of the sub-route, the route back pages are displayed here
B, Script: vue often used es6 to write, default export with export, which can contain the following data, life cycle (mounted, etc.), methods (methods), etc., see the specific syntax vue.js document.
5, main.js entry file