4.搭建后台管理前端

1.搭建后台管理前端

1.1.导入已有资源

后台项目相对复杂，为了有利于教学，我们不再从0搭建项目，而是直接使用课前资料中给大家准备好的源码：

我们解压缩，放到工作目录中：

然后在Intellij idea中导入新的工程：

选中我们的工程：

1.2.安装依赖

你应该注意到，这里并没有node_modules文件夹，方便给大家下发，已经把依赖都删除了。不过package.json中依然定义了我们所需的一切依赖：

我们只需要打开终端，进入项目目录，输入：npm install命令，即可安装这些依赖。

大概需要几分钟。

如果安装过程出现以下问题：

建议删除node_modules目录，重新安装。或者copy其他人的node_modules使用

1.3.运行一下看看

在package.json文件中有scripts启动脚本配置，可以输入命令：npm run dev或者npm start

发现默认的端口是9001。访问：http://localhost:9001

会自动进行跳转：

1.4.目录结构

webpack：是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。并且提供了前端项目的热部署插件。

1.5.调用关系

我们最主要理清index.html、main.js、App.vue之间的关系：

理一下：

• index.html：html模板文件。定义了空的div，其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中）