乐优商场项目day05——搭建后台前端
搭建后台前端前,可以先去看一下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框架