按需引入 Ant-Design-Vue

一、使用组件

安装  ： npm i --save ant-design-vue

二、按需加载

下载插件 ： npm i babel-plugin-import -D

插件会帮你转换成 ant-design-vue/lib/xxx 的写法。另外此插件配合 style 属性可以做到模块样式的按需自动加载。

注意，babel-plugin-import 的 style 属性除了引入对应组件的样式，也会引入一些必要的全局样式。如果你不需要它们，建议不要使用此属性。你可以 import 'ant-design-vue/dist/antd.css 手动引入，并覆盖全局样式。

安装 less 和 less-loader

Ant -Design-Vue 是通过 less 编写的

安装 less :  npm i less --save-dev

安装 less-loader :  npm i less-loader --save-dev

配置 babel.config.js 

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

配置 vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  css: {
    loaderOptions: {
        less: {
          lessOptions:{
            javascriptEnabled: true,
          }
        }
    }
},
})

在 main.ts 下引入需要的组件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { Button} from 'ant-design-vue'

createApp(App)
.use(store)
.use(router)
.use(Button)
.mount('#app')

在需要使用的组件中直接使用

<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
  
  <div :style="{ background: 'rgb(190, 200, 200)', padding: '26px 16px 16px' }">
    <a-button type="primary" ghost>Primary</a-button>
    <a-button ghost>Default</a-button>
    <a-button type="dashed" ghost>Dashed</a-button>
    <a-button type="primary" danger ghost>Danger</a-button>
  </div>




</template>


<script lang="ts">
import { defineComponent } from 'vue';


export default defineComponent({
  name: 'HomeView',

});
</script>