開始
從這里開始是用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>也可以做動畫過渡效果)。