概述
最近抽出时间把Vue3前端的学习又往前推进一步了，按照 vue3 composition api 代码组织方式，照葫芦画瓢的实现一个简单的左右两栏布局，点击左边栏菜单，右侧可以显示对应菜单的功能。虽然有点丑，但不再是个单页面，搭建了一个项目的雏形，后续可以在此基础可以更多的事情，顺理下思路，作此笔记。
环境信息和开发库版本
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 # 侧边栏菜单组件
│ ├── pages
│ │ ├── about.vue # 普通页面组件
│ │ ├── button.vue # antd 按钮组件
│ │ ├── echart.vue # echart组件
│ │ └── home.vue # 普通页面组件
│ └── router
│ └── index.js # 路由
- src/main.js 对antd做了全局引用
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
...
app.use(Router);
- src/components 用于存放Web页面的布局组件
依赖关系如下:App.vue -> layout.vue -> sider.vue这三个组件纯粹用于页面布局，菜单位于左边栏，header，context, footer 位于右边栏 - src/pages 用于存放业务功能的组件，被菜单和布局组件调用，静态的页面路由定义在 src/router/index.js, 由main.js全局引用
- 点击 sider.vue 组件实现的菜单，菜单中 < router-link > 定义的api请求，在 layout.vue 组件中被 < router-view > 渲染, 从而实现一个多功能可扩展的动态的Web页面
具体代码可以参考：https://github.com/panhaitao/Vue3-demo
实现效果如下
截屏2021-11-13 下午6.16.07.png
