集成ant design
npm install ant-design-vue@next --save
引入 main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue'; // 引入 ant design
import 'ant-design-vue/dist/antd.css';
createApp(App).use(store).use(router).use(Antd).mount('#app')
使用：https://next.antdv.com/components/button-cn 直接在html中使用即可。
页面布局
Primary Button
打开下面的网站，里面有各种各样的组件可以直接使用。这里我选择了layout的一个布局。
https://next.antdv.com/components/layout-cn
将vue-cli的App.vue 页面改成下面的布局。删除App.vue原有的script和css将layout的template和css复制进来即可。
router-view动态获取内容nav 1 nav 2 nav 3 subnav 1 option1 option2 option3 option4 subnav 2 option5 option6 option7 option8 subnav 3 option9 option10 option11 option12 Content Ant Design ©2018 Created by Ant UED
将中间的内容提取到Home.vue里面。实现router-view动态获取内容
第一步：直接将中间的a-layout搬到Home.vue的template里面
subnav 1 option11111 option2 option3 option4 subnav 2 option5 option6 option7 option8 subnav 3 option9 option10 option11 option12 Content
第二步：使用
使用componentnav 1 nav 2 nav 3 Roc ©2021 Created by Roc
将header和footer提取成为component
nav 1111 nav 2 nav 3
在app.vue中导入并使用
使用组件并加入数据
{{ text }} {{ item.name }}
看起来像这个样子
