访问流程：用户在浏览器输入路径，例如： --> index.js(/item/brand路径对应pages/item/Brand.vue组件) --> 该组件显示在App.vue的锚点位置 --> main.js使用了App.vue组件，并把该组件渲染在index.html文件中（id为“app”的div中）
Vue虽然会帮我们进行视图的渲染，但样式还是由我们自己来完成。这显然不是我们的强项，因此后端开发人员一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如：
BootStrap
LayUI
EasyUI
ZUI
然而这些UI组件的基因天生与Vue不合，因为他们更多的是利用DOM操作，借助于jQuery实现，而不是MVVM的思想。
而目前与Vue吻合的UI框架也非常的多，国内比较知名的如：
element-ui：饿了么出品
i-view：某公司出品
然而我们都不用，我们今天推荐的是一款国外的框架：Vuetify
官方网站：https://vuetifyjs.com/zh-Hans/
有中国的为什么还要用外国的？原因如下：
Vuetify几乎不需要任何CSS代码，而element-ui许多布局样式需要我们来编写
Vuetify从底层构建起来的语义化组件。简单易学，容易记住。
Vuetify基于Material Design（谷歌推出的多平台设计规范），更加美观，动画效果酷炫，且风格统一
这是官网的说明：
缺陷：
目前官网虽然有中文文档，但因为翻译问题，几乎不太能看。
2.3.怎么用？基于官方网站的文档进行学习：
我们重点关注UI components即可，里面有大量的UI组件，我们要用的时候再查看，不用现在学习，先看下有什么：
以后用到什么组件，就来查询即可。
2.4.项目页面布局接下来我们一起看下页面布局。
Layout组件是我们的整个页面的布局组件：
一个典型的三块布局。包含左，上，中三部分：
里面使用了Vuetify中的2个组件和一个布局元素：
v-navigation-drawer ：导航抽屉，主要用于容纳应用程序中的页面的导航链接。
v-toolbar ：工具栏通常是网站导航的主要途径。可以与导航抽屉一起很好地工作，动态选择是否打开导航抽屉，实现可伸缩的侧边栏。
v-content：并不是一个组件，而是标记页面布局的元素。可以根据您指定的app组件的结构动态调整大小，使得您可以创建高度可定制的组件。
那么问题来了：v-content中的内容来自哪里？
Layout映射的路径是/
除了Login以外的所有组件，都是定义在Layout的children属性，并且路径都是/的下面
因此当路由到子组件时，会在Layout中定义的锚点中显示
并且Layout中的其它部分不会变化，这就实现了布局的共享
3.使用域名访问本地项目 3.1.统一环境我们现在访问页面使用的是：:9001
有没有什么问题？
实际开发中，会有不同的环境：
开发环境：自己的电脑
测试环境：提供给测试人员使用的环境
预发布环境：数据是和生产环境的数据一致，运行最新的项目代码进去测试
生产环境：项目最终发布上线的环境
如果不同环境使用不同的ip去访问，可能会出现一些问题。为了保证所有环境的一致，我们会在各种环境下都使用域名来访问。
我们将使用以下域名：
主域名是：，leyou.com
管理系统域名：manage.leyou.com
网关域名：api.leyou.com
...
但是最终，我们希望这些域名指向的还是我们本机的某个端口。
那么，当我们在浏览器输入一个域名时，浏览器是如何找到对应服务的ip和端口的呢？
3.2.域名解析一个域名一定会被解析为一个或多个ip。这一般会包含两步：
本地域名解析