搭建后台管理前端
1、导入已有资源
后台静态页面资源,前端的页面就不自己写了,有需要的可以QQ:514742768,找我要,我这里直接导入源码:idea导入项目
这正是一个用vue-cli构建的webpack工程:
2、安装依赖
package.json中定义了我们所需的一切依赖:我们删除node_modules文件夹,可以打开终端,进入项目目录,输入:npm install
命令,重新安装这些依赖。
3、运行
输入命令:npm run dev
发现默认的端口是9001。访问:http://localhost:9001
会自动进行跳转:
Vuetify框架
我们使用Vuetify框架来帮助我们开发前台页面,它是与Vue吻合的UI框架,基于MVVM思想,官网上提供了很多组件我们可以直接拿来使用。
官方网站:https://vuetifyjs.com/zh-Hans/
我们重点关注UI components即可,里面有大量的UI组件,我们要用的时候再查看。
项目结构
1、目录结构
2、调用关系
最主要理清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:定义请求路径和组件的映射关系。相当于之前的
- App.vue中也没有内容,而是定义了vue-router的锚点:,我们之前讲过,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中)
3、页面布局
Layout组件是我们的整个页面的布局组件:
里面使用了Vuetify中的2个组件和一个布局元素:
- v-navigation-drawer :导航抽屉,主要用于容纳应用程序中的页面的导航链接。
- v-toolbar:工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作,动态选择是否打开导航抽屉,实现可伸缩的侧边栏。
- v-content:并不是一个组件,而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小,使得您可以创建高度可定制的组件。
- Layout映射的路径是 /
- 除了Login以为的所有组件,都是定义在Layout的children属性,并且路径都是 / 的下面
- 因此当路由到子组件时,会在Layout中定义的锚点中显示。
- 并且Layout中的其它部分不会变化,这就实现了布局的共享。