从零开始ant-design-vue-pro开发笔记（一）
开始
从这里开始是用ant-design-vue组件写ant-design-vue-pro这个后台项目实现步骤的从零开始搭建的过程，视频地址，它采用了ant-desgin-vue的组件库作为素材开发，进一步提炼了中后台管理系统的产品原型，可以帮助快速搭建后台页面。技术栈： ES2015+、Vue.Js、Vuex、Vue-Router、g2 和 antd-vue。
初始化项目
采用Vue cli工具帮我们快速搭建项目脚手架，没有安装 Vue cli 3 的需要先用 npm 或者 yarn 安装（安装步骤略）。
下面开始是通过 Vue cli 3 创建项目，引入必要的插件、依赖等基本步骤：
- 创建ant-desgin-vue-pro项目
d:
cd vue
vue create ant-design-vue-pro
选择
以下位生成项目配置的选项列：按空格为选中，回车为确定到下一步：
//选择特性
Manually select features：
Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter、Unit Testing
//是否用history的路由
use hisotry mode ： y
//选择css预加载器
pick a Css pre-processor ：Less
//选择代码检查和美化器
pick a linter/formatter : Eslint + Prettier
//选择额外的代码检查特性
pick additional lint features:
Lint on save、Lint and fix on commit
//选择单元测试
pick a unit testing：
Jest
//是否选择单独的配置文件放配置而不是都放入package.json
where do you prefer placing config for Babel，PostCSS：
In decicated config files
//是否保存预设值给将来使用
Save this as a preset for future projects：
y
//保存配置为什么名字
save preset as：
ant-design-pro-vue
- 安装依赖的组件库
npm i ant-design-vue moment
Webpack和Babel配置
安装webpack和Babel配置：
webpack：
项目根目录下增加cli的配置文件 vue.config.js ，添加如下配置来支持less(配置链接)：
module.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
};
安装babel插件：
npm i --save-dev babel-plugin-import
babel.config.js中加入按需加载less的配置：
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
] // `style: true` 会加载 less 文件
]
后面就可以按需加载需要的组件了：
main.js中加入：
import { Button, Icon } from "ant-design-vue";
Vue.use(Button);
Vue.use(Icon);
组件template中可以加入：
<a-button>hello world</a-button>
来按需渲染组件了。
设置路由和布局
通过修改router.js来设置路由信息，里面有布局路由组件、基础视图组件、404组件，具体代码可以参考：https://github.com/vueComponent/ant-design-vue-pro/ 可以用git checkout代码到本地，切换到0.0.3这个tag标签下查看完整的代码。
效果图：
改变url的时候的进度条插件nprogress
安装：
npm i nprogress
引入：
import "nprogress/nprogress.css";
import NotFound from "./views/404";
路由后面使用：
router.beforeEach((to, form, next) => {
NProgress.start();
next();
});
router.afterEach(() => {
NProgress.done();
});
这样就可以实现url变化时候，页面上有一个加载的进度条显示动画效果(ant-vue作者采用NProgress来做动画效果，Vue官方的<transition>也可以做动画过渡效果)。
