1、Vue项目中安装 Element Plus
# NPM
$ npm install element-plus --save
# Yarn
$ yarn add element-plus
# pnpm
$ pnpm install element-plus
2、组件按需引入配置
Vant按需引入- - -安装:unplugin-vue-components 插件
unplugin-vue-components 插件可以在Vue文件中自动引入组件(包括项目自身的组件和各种组件库中的组件)
使用此插件后,不需要手动编写 import { Button } from 'ant-design-vue'
这样的代码了,插件会自动识别 template
中使用的自定义组件并自动注册。
unplugin-vue-components 是由 Vue官方人员开发的一款自动引入插件,可以省去比如 UI 库的大量 import 语句。
1.安装插件
下载按需引入组件的插件
npm i -D unplugin-vue-components unplugin-auto-import
2、在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 'element-plus/es/components/button/style/css'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 按需引入Element-plus
AutoImport({
resolvers: [ElementPlusResolver({ importStyle: false })]
}),
Components({
resolvers: [ElementPlusResolver()]
})
],
})
3、Element Plus 实现Icon图标的自动导入
3.1、下载安装:iocns插件
1、先安装:npm i -D unplugin-vue-components unplugin-auto-import
2、再安装:npm i -D @element-plus/icons-vue unplugin-icons
3.2、在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'
// 自动导入Icon图标
import IconResolver from "unplugin-icons/resolver";
import Icons from "unplugin-icons/vite";
// import 'element-plus/es/components/button/style/css'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 按需引入Element-plus //引入icon
AutoImport({
resolvers: [
ElementPlusResolver({ importStyle: false }), // 组件自动导入
IconResolver({ prefix: "icon" }),
],
}),
Components({
resolvers: [
ElementPlusResolver(),// 组件自动导入
IconResolver({
//prefix: 'icon', // 修改Icon组件前缀,不设置则默认为i,禁用则设置为false
enabledCollections: ["ep"] // 指定collection,即指定为elementplus图标集ep
}),
],
}),
Icons({ scale: 1, defaultClass: "inline-block", autoInstall: true }),
],
})