概述

最近抽出時間把Vue3前端的學(xué)習(xí)又往前推進(jìn)一步了，按照 vue3 composition api 代碼組織方式，照葫蘆畫瓢的實現(xiàn)一個簡單的左右兩欄布局，點擊左邊欄菜單，右側(cè)可以顯示對應(yīng)菜單的功能。雖然有點丑，但不再是個單頁面，搭建了一個項目的雛形，后續(xù)可以在此基礎(chǔ)可以更多的事情，順理下思路，作此筆記。

環(huán)境信息和開發(fā)庫版本

Nodejs v14.18.1，Npm 6.14.15

• "vue": "^3.0.0",
• "axios": "^0.21.1",
• "ant-design-vue": "^2.2.8",
• "echarts": "^5.2.0",
• "vuex": "^4.0.2",
• "vue-router": "^4.0.10",
• "qs": "^6.10.1"

源碼目錄說明

├── src
│   ├── main.js
│   ├── App.vue
│   ├── components
│   │   ├── layout.vue     # 布局頁面組件
│   │   └── sider.vue       # 側(cè)邊欄菜單組件   
│   ├── pages
│   │   ├── about.vue      # 普通頁面組件
│   │   ├── button.vue     # antd 按鈕組件
│   │   ├── echart.vue     # echart組件
│   │   └── home.vue      # 普通頁面組件 
│   └── router
│       └── index.js           # 路由

1. src/main.js 對antd做了全局引用

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
...
app.use(Router);

2. src/components 用于存放Web頁面的布局組件
   依賴關(guān)系如下: App.vue -> layout.vue -> sider.vue 這三個組件純粹用于頁面布局，菜單位于左邊欄，header，context, footer 位于右邊欄
3. src/pages 用于存放業(yè)務(wù)功能的組件，被菜單和布局組件調(diào)用，靜態(tài)的頁面路由定義在 src/router/index.js, 由main.js全局引用
4. 點擊 sider.vue 組件實現(xiàn)的菜單，菜單中 < router-link > 定義的api請求，在 layout.vue 組件中被 < router-view > 渲染, 從而實現(xiàn)一個多功能可擴(kuò)展的動態(tài)的Web頁面
   具體代碼可以參考：https://github.com/panhaitao/Vue3-demo

實現(xiàn)效果如下

截屏2021-11-13 下午6.16.07.png

參考

• Vue3 組合式 API: https://vue3js.cn/vue-composition-api/
• https://router.vuejs.org/zh/installation.html
• http://m.itdecent.cn/u/a9633a4e84c7
• https://blog.csdn.net/xj932956499/article/details/100916147