antd-vue按需引入

要实现 antd-vue 的按需引入，首先需要在项目中安装 babel-plugin-import 插件。您可以使用以下命令进行安装：

npm install babel-plugin-import --save-dev

安装完成后，在项目的 .babelrc 文件中添加以下配置：

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

接下来，在 main.js 文件中引入需要使用的组件。您可以使用 import 语句将所需的组件引入，并将其注册为全局组件。例如，如果您想引入 Button 组件，可以这样做：

import Vue from 'vue';
import { Button } from 'ant-design-vue';
import App from './App.vue';

Vue.component(Button.name, Button);

new Vue({
  render: h => h(App),
}).$mount('#app');

最后，在需要使用组件的地方，您可以直接在模板中使用该组件。例如，在 App.vue 文件的模板中使用 Button 组件可以这样做：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <a-button type="primary">Button</a-button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

这样就可以按需引入并使用 antd-vue 的组件了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [vue-cli4.0下antd(ant-design-vue)按需引入(附带完整过程)](https://blog.csdn.net/weixin_43641850/article/details/108296677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]