# `vue3` 使用ant ## 在 `vue3` 项目中新增 `antd` > 此处是通过 vue cli 创建 vue3.0 项目,直接在项目目录下新增 ### 1. 安装 ant to vue3 通过 `yarn` 或者 `npm` 进行安装 `ant` <!-- tabs:start --> #### **yarn** ```shell yarn add ant-design-vue@next ``` #### **npm** ```shell npm i --save ant-design-vue@next ``` <!-- tabs:end --> >[!Warning] >如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用 `vue3.0` 方法进行引用会在浏览器内提示 `Cannot read property 'use' of undefined` ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用 > 20210907: [官方支持vue3的文档](https://2x.antdv.com/docs) #### `ant`官方安装方法 <!-- tabs:start --> #### **yarn** ```shell yarn add ant-design-vue ``` #### **npm** ```shell npm install ant-design-vue --save ``` <!-- tabs:end --> ### 2. `vuecli` 中全局配置 `ant` > 全局配置ant > 在vue3中全局挂载模块和vue2中有一点区别, 区别不大 <!-- tabs:start --> ### **vue3方案** 编辑 `src` 目录下的 `main.js` ,使用 `app.use` 来进行导入,支持链式调用 ```javascript import { createApp } from 'vue'; import Antd from 'ant-design-vue'; import App from './App'; const app = createApp(App); app.use(Antd);//此处为引用antd app.mount("#app"); // 也可以按照下面方式进行引用,xxx为模块 createApp(app).use(xxx).use(xxx).use(Antd) ``` ### **vue2方案** 编辑`src`目录下的`main.js`文件.在创建好的情况下加入下面语句 ```js import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' Vue.config.productionTip = false // 全局注册导入antd. Vue.use(Antd) ``` <!-- tabs:end --> ## 递归渲染 `sidebar` #### 1. 思路解析 侧边栏部分可以使用 `ant` 的布局 `Layout` 来实现,配合 `ant` 的导航菜单 `a-menu` 子菜单使用 `a-sub-menu` 来实现多层级 ```html <a-menu> <a-menu-item>目录1</a-menu_item> <a-sub-menu title="目录2"> <a-menu-item>子目录1</a-menu-item> <a-menu-item>子目录2</a-menu-item> </a-sub-menu> </a-menu> ``` 如上方代码显示的结构将会显示成下方结构,通过递归循环渲染此结构即可实现递归渲染 <hr/> 目录1 <details> <summary> 目录2 </summary> <option>子目录1</option> <option>子目录2</option> </details> #### 2. 目录与数据结构 > [!tip] > 该目录数据结构与[vueRouter自动注册](../vue/vue_router.md)中的数据结构基本一致. 1. 文件夹目录结构,创建 主要使用 sidebar.js url app.js components sidebars sidebar.js 1. 示例数据结构 ```javascript [ { text: '摄像头',// 页面标题 is_menus: true,//是否为侧边栏的大项 children: [ { is_menu: true, text: '摄像头列表', path: '/cameraList', name: 'Home', component: Home }, { is_menu: true, text: '录像', path: '/cameraVideo', name: 'Home', component: Home } ], }, { text: '账户', is_menus: true, children: [ { is_menu: true, text: '配置', path: '/user/config', name: 'Home', component: Home } ], }, { title: '日志', is_menu: true,//路由项 path: '/log', name: 'Log', text: '日志', component: Home }, { title: '404页面', is_menu: false,//路由项 path: '/:pathMatch(.*)*', name: 'Log', text: '日志', component: Home }, ] ``` #### 3. 示例代码 在 `sidebarMenuItem.js` 中的内容 ```jsx <template> <a-menu-item v-if="menu.is_menu" :key="mykey"> <router-link :to="menu.path">{{menu.text}}</router-link> </a-menu-item> <a-sub-menu v-if="menu.is_menus" :title="menu.text" :key="mykey"> <sidebar-menu-item v-for="(item,i) in menu.children" :mykey="menu.path +'_'+item.path+'_'+i" :menu="item" :key="menu.path +'_'+item.path+'_'+i" ></sidebar-menu-item> </a-sub-menu> </template> <script> export default { name: 'sidebar-menu-item', components: { }, props: { menu: { type: Object, default: function (){ return {} } }, mykey: { type: String, default: '' } }, mounted(){ console.log(this.menu); } } </script> <style> </style> ``` 在app.js中使用`sidebarMenuItem`的内容 ```jsx <template> <a-layout id="components-layout-demo-responsive" class="h-full"> <a-layout-sider breakpoint="lg" collapsed-width="0" @collapse="onCollapse" @breakpoint="onBreakpoint" > <div class="logo" /> <a-menu mode="inline" > <!-- 此处为使用组件 menus为数组 --> <sidebarMenuItem v-for="(item,i) in menus" :menu="item" :mykey="item.path + '_'+i" :key="'menu_'+item.path + '_'+i" /> </a-menu> </a-layout-sider> <a-layout class="h-full flex"> <a-layout-content> <router-view/> </a-layout-content> <a-layout-footer style="textAlign: center"> ant </a-layout-footer> </a-layout> </a-layout> </template> <script> import sidebarMenuItem from './components/sidebars/sidebarMenuItem.vue' export default { name: 'App', components: { sidebarMenuItem, }, data(){ return { menus: [] } }, } </script> ``` #### 4. 注意事项 > 多看文档,[ant文档地址](https://2x.antdv.com/components/overview-cn/) 1. 操作一个菜单其他菜单会一起响应. 解决方法: 此时需要给每一个 `a-menu-item` 以及 `a-sub-menu` 设置 `key` 值 通过给组件设置 `mykey` 属性赋值给 `key` 值 2. vue2好像就是这么整的 3. 渲染出来的子菜单栏在侧边栏旁边生成 解决方法: 在创建 `a-menu` 组件时设置属性 `mod` 为 `inline` ```jsx <a-menu mode="inline"> 其他组件 </a-menu> ``` ## 侧边栏配合`vueRouter` > [!tip] > 确保已经使用`vue-router` 关于使用`vue-router`的方法可以查看 > [官方文档](https://router.vuejs.org/zh/installation.html) > 或者 [我的vueRouter瞎整](../vue/vue_router.md)