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 组件库
      }),
     
    ],

  

 

posted @ 2023-06-13 11:02  大楚打码人  阅读(90)  评论(0编辑  收藏  举报