第三章 项目实践

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，计算属性，路由等