Vue3+Ts 实现 ant-design-vue 的全局引入和局部引入以及Vite按需加载

为了不耽误您的时间，可以直接拉到最后，第三种方法，观看使用~~~

全局引入

ant-design-vue的全局引入很简单，npm i --save ant-design-vue@next，然后在main.ts中添加

即可。
不推荐：这会影响应用的网络性能。（from 官网）

局部引入

第一种：在需要的组件中引入，例如按钮（方法可行但不推荐，只做说明）
例子组件

<template>
  <div class="hello">
    <p>
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="danger">Danger</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="link">Link</a-button>
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Button from "ant-design-vue/lib/button";  // 引入按钮
import "ant-design-vue/lib/button/style/css";  // 引入样式
export default defineComponent({
  name: "HelloWorld",
  components: {
    "a-button": Button,  // 使用按钮
  },
  props: {},
});
</script>

<!-- JellyDD 靓仔~ -->
<style scoped></style>

要单独引入button以及按钮的样式，繁琐 + 1

第二种：需要插件 使用 babel-plugin-import（官网推荐）。
首先我们 npm install babel-plugin-import --save-dev
然后配置 babel.config.js 文件
babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" },
    ], // `style: true` 会加载 less 文件
  ],
};

再使用ant-design-vue就可以这样写
例子组件

<template>
  <div class="hello">
    <p>
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="danger">Danger</a-button>
      <a-button type="primary">按钮</a-button>
      <a-button type="link">Link</a-button>
    </p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { Button } from "ant-design-vue";  // 直接引入按钮
export default defineComponent({
  name: "HelloWorld",
  components: {
    "a-button": Button,  // 使用按钮
  },
  props: {},
});
</script>

<!-- JellyDD 靓仔~ -->
<style scoped></style>

这样每次在组件中使用就得引入，也很麻烦+10086，我们为了不每次都引入可以不美的操作：
直接在main.ts中使用use方法，如下
main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button, TimePicker } from "ant-design-vue";
createApp(App).use(Button).use(TimePicker).use(store).use(router).mount('#app')

需要使用的就直接在main.ts中引入，就可以了，但是不够简洁，没有模块化。

第三种简化：所以最终终方法应该怎么做呢：

我们可以写一个模块，导出一个参数为createApp(App)的函数，所以我们可以这样操作
新建文件ant-design-vue，里面新建index.ts模块

index.ts写一个导出一个参数为createApp(App)的函数，如下
文件ant-design-vue里面的index.ts

import { Button, TimePicker } from "ant-design-vue";

const components = [Button, TimePicker]
// eslint-disable-next-line
export default function setupAtnd(app: any) {
  components.forEach((component) => {
    app.use(component)
  })
}

然后我们需要什么就从这里引入，使用
最后别忘记在main.ts中使用

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import setupAtnd from "./ant-design-vue/index";
const app = createApp(App)
setupAtnd(app)
app.use(store).use(router).mount('#app')

可能遇到的问题，全部如上操作，控制台还是提示全局引入，可能原因，重装一下
ant-design-vue

我原本用的上面的就是报错…无语子

vite按需加载
vite.config.js文件

import ViteComponents, {
  AntDesignVueResolver
} from 'vite-plugin-components';
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    /* ... */
    vue(),
    ViteComponents({
      customComponentResolvers: [AntDesignVueResolver()],
    }),
  ],
};

然后在组件中直接使用


即可。