Vite 中引入 ant-design-vue 的方法总结

Vite 中引入 ant-design-vue

安装

$ npm install ant-design-vue --save

or

$ yarn add ant-design-vue

方法1，快速引入

准备工作

引入工作

1. 第一步，样式引入

main.js or main.ts中引入样式

import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

2.第二部，组件引入

main.js or main.ts中写入

import { DatePicker } from 'ant-design-vue';
app.use(DatePicker);

更多参照官网

方法2，自动按需引入

准备工作

加载依赖包安装

npm i unplugin-vue-components --dev

or

yarn add unplugin-vue-components --dev

引入工作

vite.config中添加插件

引入包

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

配置vite

Components({
  resolvers: [AntDesignVueResolver()]
})

查看是否按需加载

（1）查看控制台是否有如下文本

17:04:17 [vite] ✨ new dependencies optimized: ant-design-vue/es，ant-design-vue/es/button/style/css

（2）F12进入调试，查看ELements，检查页面style是否只有Antd已引入组件

由两个style标签氛围两部分，一部分是antd的基本样式，另一部分就是已引入的组件样式

方法3，手动按需引入

准备工作

yarn add @originjs/vite-plugin-commonjs -D

or

npm i @originjs/vite-plugin-commonjs -D

引入工作

vite配置修改如下

引入包

vite.config.ts

import { viteCommonjs, esbuildCommonjs } from '@originjs/vite-plugin-commonjs';

组件中

import { Button as AButton } from "ant-design-vue"; // 加载 JS

import 'ant-design-vue/lib/button/style/css'; // 实际上引入的js，`vite`默认编译中不支持commonjs，所以还需要引入其他插件

or

import 'ant-design-vue/lib/button/style/index.less'; // 直接引入，引入后不需要下面插件引入一步

配置vite

插件引入

plugins: [
    ...,
    viteCommonjs(),
    ...
]

optimizeDeps配置，查看issue

optimizeDeps: {
    esbuildOptions: {
        plugins: [
            esbuildCommonjs(['ant-design-vue'])
        ],
    },
}

查看是否按需加载

（1）查看控制台是否有如下文本

17:04:17 [vite] ✨ new dependencies optimized: ant-design-vue/es，ant-design-vue/es/button/style/css

（2）F12进入调试，查看ELements，检查页面style是否只有Antd已引入组件

由两个style标签氛围两部分，一部分是antd的基本样式，另一部分就是已引入的组件样式