vue3+ts+vite 集成ant-design 第七回

编程尽头谁为峰，一遇AI道成空。

1.Element-plus确实很优秀，但尽管这么优秀，我还是想一领ant-design的风采。

// 安装ant-design-vue
npm install ant-design-vue --save

　　
2.在main.ts里引入相关样式等

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import * as  Icons from '@ant-design/icons-vue'

　　

3.因antd的Icon 一般是通过指令的方式使用的，所以我们改造下。以适配动态Icon，在main.ts里插入这么一段

Object.keys(Icons).map(key => {//
    app.component(key, Icons[key as keyof typeof Icons])
})

　　

原先使用Icon是这样的，

 <user-outlined />
改用组件的方式使用Icon是这样的

 <component is="user-outlined"></component>

 

4.vite.config.ts 里做一些修改，使用按需引入的方式

 plugins:[
      vue(),
      AutoImport({
        imports: ['vue', 'vue-router'], // 自动导入vue和vue-router
        resolvers:[
          AntDesignVueResolver(), // 自动导入ant-design-vue
         
        ]
      }),
      Components({
        resolvers:[AntDesignVueResolver({importStyle: true, resolveIcons: true})] // 自动导入和注册 antd 组件库
      }),
     
    ],