ant-design-vue 按需加载 （踩坑）

 
作为一名有几年React开发经验的人，我最近开始学习Vue.js，并被其简洁的语法和强大的生态系统所吸引。在使用Vue.js进行开发时，我选择了Ant Design Vue作为UI库，因为它提供了丰富的组件和美观的UI样式。然而，在使用Ant Design Vue时，我遇到了一个问题：如何按需加载组件。 
 
众所周知，按需加载可以减少包的大小，提高页面的加载速度。在React中，可以使用import()动态导入组件，从而实现按需加载。然而，在Vue.js中，按需加载组件的方式略有不同。 
 
在Ant Design Vue中，有两种方式可以实现按需加载组件： 
 

• 方式一：使用按需加载插件 
   

// 安装按需加载插件
npm install babel-plugin-import

// 在.babelrc文件中添加配置
{
  "plugins": [
    [
      "import",
      {
        "libraryName": "ant-design-vue",
        "libraryDirectory": "es",
        "style": "css"
      }
    ]
  ]
}

 

• 方式二：使用按需加载组件 
   

import { Button } from 'ant-design-vue/es/components/button/index.js'

export default {
  components: {
    Button
  }
}

 
 
这里，我遇到了第一个坑：在使用方式一的时候，我发现导入的组件样式并没有被加载。经过一番研究，我发现需要在.babelrc文件中添加额外的配置才能加载组件样式。 
 

{
  "plugins": [
    [
      "import",
      {
        "libraryName": "ant-design-vue",
        "libraryDirectory": "es",
        "style": true
      }
    ]
  ]
}

 
 
添加了这个配置之后，组件样式就可以正常加载了。 
 
在使用方式二的时候，我遇到了第二个坑：我发现按需加载的组件样式并没有被应用到组件上。经过一番研究，我发现需要在组件的style属性中手动引入组件样式。 
 

<template>
  <div>
    <Button type="primary">按钮</Button>
  </div>
</template>

<style>
@import '~ant-design-vue/es/button/style/index.css';
</style>

 
 
添加了这个样式引入之后，按需加载的组件样式就可以正常应用到组件上了。 
 
通过解决这两个坑，我终于可以成功地在Vue.js中使用Ant Design Vue并实现按需加载组件。希望我的经验能够帮助到其他遇到同样问题的朋友。