Vue3+TS按需加载AntDV2.x组件

最新推荐文章于 2025-11-17 03:11:29 发布

原创

最新推荐文章于 2025-11-17 03:11:29 发布 · 926 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #babel #typescript

本文介绍了如何在Vue3+TS项目中实现AntDV2.x组件的按需加载。通过引入`babel-plugin-import`插件，并在antdv.ts文件中注册所需组件，可以优化项目的体积。对于包含多个子组件的如Layout，需要单独注册。部分组件如Select可能需要特殊处理，直接在使用的地方引入。完成这些步骤后，可以在Vue组件中直接使用已注册的AntDV2.x组件。

首先先引入antdv2.x依赖
npm install ant-design-vue@next --save
或者
yarn add ant-design-vue@next

引入babel-plugin-import

按需加载需要用到"babel-plugin-import"
npm install babel-plugin-import --save
或者
yarn add babel-plugin-import
引入依赖之后,创建babel.config.js文件

module.exports = {
   
   
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import", 
      {
   
    
      	"libraryName": "ant-design-vue", "libraryDirectory": "es", "style"