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);
  1. src/components 用于存放Web页面的布局组件
    依赖关系如下: App.vue -> layout.vue -> sider.vue 这三个组件纯粹用于页面布局,菜单位于左边栏,header,context, footer 位于右边栏
  2. src/pages 用于存放业务功能的组件,被菜单和布局组件调用,静态的页面路由定义在 src/router/index.js, 由main.js全局引用
  3. 点击 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

你可能感兴趣的:(06 Vue3 使用antd 页面布局)