1怨规，使用vue-cli3搭建項目
這個項目使用的主要是ant-design組件
image.png
image.png
路由使用歷史記錄陌宿，同時使用less
image.png
image.png
image.png
2，如何自定義webpack和babel配置
打開vue-cli官網(wǎng)波丰，可以看到vue-config.js
使用組件時如果不是所有的都需要壳坪，那么可以按需引入
image.png
但是每用到一個按鈕就這么引入也是一件很繁瑣的事情，所有使用了babel
image.png
image.png
image.png
image.png
使用這個插件呀舔，首先要先安裝 npm i --save-dev babel-plugin-import
第二節(jié) 路由 路由的分類弥虐？？媚赖？霜瘪？
如何設計一個高拓展的路由
1，使用嵌套式路由惧磺，同時路由使用異步加載
image.png
image.png
也可以不單獨寫一個路由組件而是使用render函數(shù)
image.png
image.png
image.png
image.png
搭建整體布局颖对，頭部，form表單
哪個組件作為路由展示磨隘，就要有對應的router-viewer
同時還要注意嚴謹性缤底，配置一個404的頁面，為了避免用戶隨意輸入的路徑
這個404可以不使用異步加載路由
image.png
路由切換時添加加載動畫
image.png
路由切換時的加載動畫可以通過路由守衛(wèi)
image.png
image.png
image.png
第三節(jié) 實現(xiàn)一個可動態(tài)改變的頁面布局
image.png
image.png
左側(cè)菜單欄的切換可以使用自定義的番捂，通過trigger屬性：trigger=null个唧，整體思路，通過點擊事件设预，切換不同的類
在components下創(chuàng)建一個新建主題的組件徙歼，就是ant design 的抽屜draw
image.png
image.png
image.png
image.png
image.png
image.png
image.png
知識點：v-model，slot鳖枕，計算屬性魄梯，路由等
