乐优商城第五篇：搭建后台管理前端与Vuetify介绍

搭建后台管理前端

导入资源

腾讯微云链接：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中的其它部分不会变化，这就实现了布局的共享。