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的基本样式,另一部分就是已引入的组件样式
阅读 1.3k
360 声望
12 粉丝
0 条评论
360 声望
12 粉丝
文章目录
宣传栏