搭建后台管理前端
导入资源
腾讯微云链接:https://share.weiyun.com/PVQzeCps 密码:6tsvfg
安装依赖
在项目根目录下运行终端,执行npm install
,然后就会按照package.json中定义的依赖自动下载。因为依赖包过多,可能下载时间久。
首次运行
在终端下执行命令:npm start
/npm run dev
点击链接,跳转到页面:
目录结构
调用关系
- 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框架介绍
Vue虽然会帮我们进行视图的渲染,但样式还是由我们自己来完成。常用现成UI框架有:
- BootStrap
- LayUI
- EasyUI
- ZUI
这些UI组件的基因天生与Vue不合,因为他们更多的是利用DOM操作,借助于jQuery实现,而不是MVVM的思想。
与Vue组件合适的UI组件,常用的有:element-ui,i-view(小公司),Vuetify
为甚么要用Vuetify
- Vuetify几乎不需要任何CSS代码,而element-ui许多布局样式需要我们来编写
- Vuetify从底层构建起来的语义化组件。简单易学,容易记住。
- Vuetify基于Material Design(谷歌推出的多平台设计规范),更加美观,动画效果酷炫,且风格统一
怎么用
重点关注UI组件,用什么查什么。
项目页面布局
它的布局:左导航、上工具栏、中间内容,如下:
- Layout映射的路径是
/
- 除了Login以外的所有组件,都是定义在Layout的children属性,并且路径都是
/
的下面 - 因此当路由到子组件时,会在Layout中定义的锚点中显示。
- 并且Layout中的其它部分不会变化,这就实现了布局的共享。