乐趣区

关于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 的根本款式,另一部分就是已引入的组件款式
退出移动版