vue3-elementPlus 大合集
elementPlus 的 导入
第一步 安装 也可以直接 cdn 导入
npm install element-plus --save
第二步 使用
1 完整引入
任意位置 想使用 直接使用即可
main.js 中
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus)
2 手动 按需导入
安装
npm i unplugin-element-plus -D
vite.config.ts 中 配置
import { defineConfig } from 'vite'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
// ...
plugins: [ElementPlus()],
})
任意位置 想使用 导入 注册 使用
import {ElButton} from "element-plus"
{
components: { ElButton },
}
<el-button></el-button>
3 自动 按需导入 ！！！！！！！！！！！！！！！！！
函数式组件还需要导入 才可使用
安装插件
npm install -D unplugin-vue-components unplugin-auto-import
vue.config.js 中
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
},
}
任意位置 想使用 直接使用即可
<el-button></el-button>
Icon 图标
1、全局引入
安装
npm install @element-plus/icons-vue
main.js 引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
直接使用
<el-icon><add-location /></el-icon>
2 按需引入
安装
npm install @element-plus/icons-vue
在所使用的组件中引入，导入 注册 使用 ，以Edit为例
import { Edit } from '@element-plus/icons-vue';
components:{ Edit }
使用： 注意，components中的注册的组件名称与html中的一致，否则有可能不生效。
<el-icon><Edit /></el-icon>
3 Icon 自动导入 ！！！！！！！！！！！！！！！！！
安装插件
npm i @element-plus/icons-vue
npm i -D unplugin-icons (自动导入组件已将安装无需安装 unplugin-vue-components)
配置 vue.config.js
// icon
const Icons = require('unplugin-icons/webpack')
const IconsResolver = require('unplugin-icons/resolver')
configureWebpack: {
plugins: [
AutoImport({
resolvers: [
// 自动导入 Element Plus 相关函数，如：ElMessage, ElMessageBox... (带样式)
ElementPlusResolver(),
// 自动导入图标组件
IconsResolver({
prefix: 'i',
}),
],
}),
Components({
resolvers: [
// 自动导入 Element Plus 组件
ElementPlusResolver(),
// 自动注册图标组件
IconsResolver({
// 使用element-plus的图标库 被收录在iconify中 叫 ep
// 其他图标库请到 https://icon-sets.iconify.design/
enabledCollections: ['ep'],
}),
],
}),
Icons({
// compiler: 'vue3',
autoInstall: true,
}),
],
},
使用
其他图标库请到 https://icon-sets.iconify.design/
iconify 收录 element-plus的图标库叫 ep 其他的 在 数组中依次加入即可
iconify 自动安装 已经实现 --autoInstall: true,
iconify 自动导入 enabledCollections: ['ep', 'ic', 'material-symbols']
使用时 i-ep-XXX
<el-icon><i-ep-edit /></el-icon>
input加icon。要使用插槽的方式才会生效
<el-input placeholder="搜索文本框">
<template #suffix>
<i-ep-search></i-ep-search>
</template>
</el-input>
动态加载 Icon menu 中
因为是 自动导入 自己使用 需要 i-ep-user
动态 加载 规则 目前 自己摸索的 以后 改进
自己总结 其实并没有实现自动 而是 2 按需引入
动态加载数据 -- :separator-icon="ArrowRight"
数据就是 import 导入的 组件 可以 setup 仅仅导入即可
动态加载变量 -- <component :is="item.icon" item.icon === ArrowRight
无 setup 糖 中 导入 注册 ArrowRight组件
import { User } from '@element-plus/icons-vue'
导出 需要 大写
使用时 小写 或者 驼峰
<i-ep-user /> 依旧好使
需要 被 el-icon 包裹 否则 没有大小
<el-icon :size="32">
<user />
</el-icon>
动态创建
<el-icon :size="32">
<component :is="item.icon"></component>
</el-icon>
<component
:is="item.icon"
style="width: 1em; height: 1em; margin-right: 8px"
>
</component>
Loading、Message 等这种以服务的方式来调用 自动导入样式
安装 同组件的 2 手动 按需导入 使用的自动安装 所以此处需要安装
npm i unplugin-element-plus -D
配置 vue.config.js
require('unplugin-element-plus/webpack')({
// options
}),
使用
import { ElMessage } from 'element-plus'
ElMessage.error('服务器内部错误')
国际化
1 全局安装 不用
2 Element Plus 还提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。
App.vue 中
<template>
<el-config-provider :locale="locale">
<!-- 一级路由 -->
<router-view />
</el-config-provider>
</template>
<script setup>
// 配置中文
import locale from 'element-plus/lib/locale/lang/zh-cn'
</script>
自动导入 中 修改主题色
1 安装 3 组件自动导入 已经安装过 无需安装
npm install -D unplugin-vue-components unplugin-auto-import
2 @/assets/styles/el-variables.scss 中
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'primary': (
'base': #409eff,
),
/* 'success': (
'base': #67c23a,
),
'warning': (
'base': #e6a23c,
),
'danger': (
'base': #f56c6c,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
), */
),
/* $button-padding-horizontal: (
'default': 80px,
),
$font-size: (
'extra-large': 20px,
'large': 18px,
'medium': 16px,
'base': 20px,
'small': 13px,
'extra-small': 12px,
) */
);
3 vue.config.js 中
const ElementPlus = require('unplugin-element-plus/webpack')
css: {
loaderOptions: {
scss: {
//自定义的主题文件
additionalData: `@use "@/assets/styles/el-variables.scss" as *;`,
},
},
},
AutoImport + Components--resolvers--
ElementPlusResolver({ importStyle: 'sass' }),
ElementPlus({
useSource: true,
}),