1，使用vue-cli3搭建项目
这个项目使用的主要是ant-design组件
image.png
image.png
路由使用历史记录，同时使用less
image.png
image.png
image.png
2，如何自定义webpack和babel配置
打开vue-cli官网，可以看到vue-config.js
使用组件时如果不是所有的都需要，那么可以按需引入
image.png
但是每用到一个按钮就这么引入也是一件很繁琐的事情，所有使用了babel
image.png
image.png
image.png
image.png
使用这个插件，首先要先安装 npm i --save-dev babel-plugin-import
第二节 路由 路由的分类？？？？
如何设计一个高拓展的路由
1，使用嵌套式路由，同时路由使用异步加载
image.png
image.png
也可以不单独写一个路由组件而是使用render函数
image.png
image.png
image.png
image.png
搭建整体布局，头部，form表单
哪个组件作为路由展示，就要有对应的router-viewer
同时还要注意严谨性，配置一个404的页面，为了避免用户随意输入的路径
这个404可以不使用异步加载路由
image.png
路由切换时添加加载动画
image.png
路由切换时的加载动画可以通过路由守卫
image.png
image.png
image.png
第三节 实现一个可动态改变的页面布局
image.png
image.png
左侧菜单栏的切换可以使用自定义的，通过trigger属性：trigger=null，整体思路，通过点击事件，切换不同的类
在components下创建一个新建主题的组件，就是ant design 的抽屉draw
image.png
image.png
image.png
image.png
image.png
image.png
image.png
知识点：v-model，slot，计算属性，路由等
