搭建后台前端前，可以先去看一下Vue: Vue相关知识

搭建后台前端：

1.解压资料中的 leyou-manage-web 到 项目的同一目录下。

 

2.在idea中打开

 

3.安装组件（需要网络）

下载完成，1152个包

 

4.运行

运行成功

 

5.访问 localhost:9001

 

后台前端就搭建成功了！

看一下项目结构。

 

调用关系：

  • 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中）

理解了这个之后，可以点击看一下关于Vuetify框架的知识：Vuetify框架