1. Import existing resources
Background project is relatively complex, we do not build the project from zero, but direct use of ready source.
We decompression, into the working directory: E: \ javaProject \ JavaEEProject
Open the project can use idea.
First open the directory structure:
2. Installation depends
You should note that there is not node_modules folder. But in package.json still defines everything we needed to rely on:
We only need to open the terminal, enter the project directory, type: npm installcommand, you can install these dependencies. Probably take a few minutes.
3. Run it and see
There are scripts in package.json startup script configuration file, you can enter commands in the terminal idea: npm run devornpm start
That is the default port is 9001. Access: HTTP: // localhost: 9001
It will automatically jump:
4. Directory Structure
webpack: JavaScript is a modern application of static packer module (Module Bundler) . And provides hot deployment front-end plug-in project.
5. Call relations
Our main clarify the relationship between the index.html, main.js, App.vue:
Riichi below:
-
index.html: html template file. It defines empty div, with id app.
-
main.js：实例化vue对象，并且通过id选择器绑定到index.html的div中，因此main.js的内容都将在index.html的div中显示。main.js中使用了App组件，即App.vue，也就是说index.html中最终展现的是App.vue中的内容。index.html引用它之后，就拥有了vue的内容（包括组件、样式等），所以，main.js也是webpack打包的入口。
-
index.js：定义请求路径和组件的映射关系。相当于之前的<vue-router>
-
App.vue中也没有内容，而是定义了vue-router的锚点：<router-view>,我们之前讲过，vue-router路由后的组件将会在锚点展示。
-
最终结论：一切路由后的内容都将通过App.vue在index.html中显示。
-
访问流程：用户在浏览器输入路径，例如：http://localhost:9001/#/item/brand --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件，并把该组件渲染在index.html文件中（id为“app”的div中）
