Vite 按需引入 Ant Design Vue 3.0

简介: Vite 按需引入 Ant Design Vue 3.0

Vite 按需引入 Ant Design Vue 3.0

第一步下载: npm i unplugin-vue-components -D
需要注意的是:Vite你可以用 unplugin-vue-components 来进行按需加载。
但是此插件无法处理非组件模块,如 message,这种组件需要手动加载:如下
import { message } from 'ant-design-vue';
import 'ant-design-vue/es/message/style/css'; 
vite只能用 ant-design-vue/es 而非 ant-design-vue/lib
更多库的按需加载参考地址:
https://github.com/antfu/unplugin-vue-components

配置 vite.config.js

import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    vue(),
    //按需加载
    Components({
      resolvers: [AntDesignVueResolver()]
    })
  ],
})

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
13 1
|
3天前
|
JavaScript 前端开发
vue2升级到vue3的一些使用注意事项记录(四)
vue2升级到vue3的一些使用注意事项记录(四)
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable多租户机制
ruoyi-nbcio-plus基于vue3的flowable多租户机制
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
|
3天前
|
JavaScript 前端开发
vue3中使用动态组件
vue3中使用动态组件
|
3天前
|
JavaScript 前端开发 容器
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
Vue 3 中 <transition-group> 组件报错的非 props 属性传递问题
13 1
|
3天前
|
移动开发 JavaScript 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
|
3天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
ruoyi-nbcio-plus基于vue3的flowable的自定义业务撤回申请组件的升级修改
11 2