06 Vue3 使用antd 页面布局

概述

最近抽出时间把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           # 路由

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页面的布局组件
   依赖关系如下: App.vue -> layout.vue -> sider.vue 这三个组件纯粹用于页面布局，菜单位于左边栏，header，context, footer 位于右边栏
3. src/pages 用于存放业务功能的组件，被菜单和布局组件调用，静态的页面路由定义在 src/router/index.js, 由main.js全局引用
4. 点击 sider.vue 组件实现的菜单，菜单中 < router-link > 定义的api请求，在 layout.vue 组件中被 < router-view > 渲染, 从而实现一个多功能可扩展的动态的Web页面
   具体代码可以参考：https://github.com/panhaitao/Vue3-demo

实现效果如下

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

参考

• Vue3 组合式 API: https://vue3js.cn/vue-composition-api/
• https://router.vuejs.org/zh/installation.html
• https://www.jianshu.com/u/a9633a4e84c7
• https://blog.csdn.net/xj932956499/article/details/100916147