vue3.2+elelmenui-plus+vite 按需导入ui组件库
# 1、安装element-plus依赖
npm install element-plus --save
1
# 2、引入element-plus依赖
- 本文使用的依赖方式为按需应用中的自动导入,按需应用可以减少打包后文件的大小,如果不在乎大小也可使用全局引用。
- 要使用按需引用中的自动导入需要安装额外的两个插件:
unplugin-vue-components
和unplugin-auto-import
npm install -D unplugin-vue-components unplugin-auto-import
1
安装完成后我们需要配置一下项目根目录的vite
的配置文件 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
配置完上面的这些以后基本上就可以使用了,但是当使用ElementUI
的API
调用组件时还需要手动的引用样式,例如我们想使用ElMessage
这个组件,需要引入组件并引入它的样式文件:
import 'element-plus/es/components/message/style/css'
import { ElMessage } from 'element-plus'
1
2
2
如果不喜欢这样每次配置样式也可以使用插件unplugin-element-plus
来导入样式,安装它前需要添加sass
和sass-loader
依赖
npm install sass sass-loader unplugin-element-plus
1
然后在vite.config.js
配置文件中添加配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
ElementPlus({
useSource: true
})
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13