关于antv:Vite-中引入-antdesignvue-的方法总结

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 配置批改如下

引入包

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

配置 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 的根本款式，另一部分就是已引入的组件款式