前言：本文主要介绍使用 vite2.7 创建的 vue3.2 项目中的 element-plus 组件库的自动按需引入，经测试，适用于 typescript 和 JavaScript。
0、首先是安装 element-plus
npm install element-plus --save
复制代码
1、安装自动引入组件所需要使用的两个插件
npm install -D unplugin-vue-components unplugin-auto-import
复制代码
2、在 vite.config.ts（或者 vite.config.js）文件中进行如下配置
import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default { plugins: [ // ... AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }), ],}
复制代码
经过上面的配置后，便可以在 vue 项目中的任意的 SFC 中使用任意组件而不用再手动引入了，包括其对应的样式也不用手动引入。
但是，在我的实际使用时，却发现了一些问题，就是通过这种方式引入的“反馈组件”，如 Message 等，这些组件虽然可以正常使用，但是对应的样式却没有被自动引入，对于这种情况，我找到了两种解决方法：
第一种：手动引入相关样式文件
在 main.ts（或 main.js）中手动引入相应的反馈组件的样式文件。如，我用到了 Message 这个反馈组件，那么我就在 main.ts 文件中这样引入其对应的样式文件：
import 'element-plus/theme-chalk/el-message.css'
复制代码
但是这样显然不够方便，也不够优雅，于是我在翻阅 element-plus 官方手册时，注意到手册中提到了一个插件，于是有了下面的这种既足够方便又不失优雅的方式。
第二种：通过插件自动引入相关样式文件
在翻阅官方手册时，我注意到了一款插件：unplugin-element-plus，进入这个插件的仓库：https://github.com/element-plus/unplugin-element-plus/blob/HEAD/README.zh-CN.md，发现这个插件的功能就是为 element-plus 组件自动按需引入相应的样式文件，这就好办了：
安装该插件：
npm i unplugin-element-plus -D
复制代码
在 vite.config.ts(或 vite.config.js)文件中进行如下配置，
import ElementPlus from 'unplugin-element-plus/vite'export default { plugins: [ ElementPlus({ importStyle: 'css', useSource: true }), ],}
复制代码
自此，element-plus 的自动引入算是真正意义上的完成了，在使用任何组件时都不用再手动引入其对应的样式文件了。此时，完整的 vite.config.ts(或 vite.config.js)如下：
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'
import ElementPlus from 'unplugin-element-plus/vite'import AutoImport from 'unplugin-auto-import/vite'import Components from 'unplugin-vue-components/vite'import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 可以前往vite官网查看所有vite配置项: https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), ElementPlus({ // 引入的样式的类型，可以是css、sass、less等， importStyle: 'css', useSource: true }), AutoImport({ resolvers: [ElementPlusResolver()], }), Components({ resolvers: [ElementPlusResolver()], }) ], server: { host: '0.0.0.0', open: true // 自动打开浏览器 }})
复制代码
评论