Vite 中引入 ant-design-vue
装置
$ npm install ant-design-vue --save
or
$ yarn add ant-design-vue
办法 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 的根本款式,另一部分就是已引入的组件款式