剛做完一個vue3的項目，不過沒有上TS。在此記錄一下框架搭建時的註意事項以及一些基本的配置、layout佈局、路由配置和項目用到的組件封裝等。如果對路過的各位有幫助就再好不過瞭，歡迎點贊收藏。
項目說明：
本項目采用瞭vue-cli4，基於vue3+js+antd-vue+pinia+axios+vue-router4搭建的項目。
想要看框架初始化與配置的，看 ↓
想要看pinia+axios+vue-router4的配置，看 ↓
上一篇文章我說到，接下來要做的layout界面是 ↓ 這樣的。login和error頁面我就不po代碼瞭。
圖片來自antd-vue官網
在做這個界面之前，先來分析一下結構：
- 左邊是菜單欄，這裡簡單點我先做一級菜單，二級是同理的。那麼左側的代碼封裝成一個組件，叫做LeftMenu.vue
- 上面的是header部分，可以拿來放置一些個人信息的顯示或者操作（比如登出、設置等），由於header是關鍵字，是語義化的標簽，所以這裡封裝的代碼組件，叫做CusHeader.vue
- 中間部分的content就是切換路由時顯示不同組件的位置瞭。
介紹完畢後，先做一下準備工作。留意一下左側的菜單欄的icon，其實是ant-vue的icon，通常我們定義菜單的時候是用數組對象的形式，自然icon也是最好用對象的形式傳遞。這裡我需要先引入一下UI庫的icon（如果有更好的辦法歡迎在評論區留言）。
在main.js，註冊一下圖標組件
...
import * as Icons from "@ant-design/icons-vue";
...
Object.keys(Icons).map((key) => {
app.component(key, Icons[key]);
});
...
