Element Ui 2.x 升级到 Element Plus。
一、安装Element Plus
首先，你需要在你的 Vue 项目中安装 Element Plus。打开你的终端或命令提示符，并导航到你的项目目录，然后运行以下 npm 命令来安装 Element Plus：
输入：npm install element-plus --save
二、安装需要引入插件
1、全局引入（完整引入）
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')2、按需引入
①需要使用额外插件来导入要使用的组件
输入：npm install -D unplugin-vue-components unplugin-auto-import
然后把文件插入到配置文件中
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})3、手动导入
需安装 unplugin-element-plus 来导入样式
三、使用Element Plus组件
一旦 Element Plus被正确引入，你就可以在你的 Vue 组件模板中直接使用 Element Plus
的组件了。例如，使用 Button 组件：
<template>
<div>
<el-button type="primary">主要按钮</el-button>
</div>
</template>四、自定义主题
（一）如何覆盖主题？
1、使用CSS变量
可通过css来覆盖一些简单的样式。适用于不想深入scss变量配置或只需要调整少量颜色的场景
:root {
--el-color-primary: #409EFF; /* 覆盖主题色 */
--el-text-color-primary: #303133; /* 覆盖主要文字颜色 */
}2、通过SCSS变量覆盖
①配色方案
配色表——找到色彩搭配原理与技巧！
②安装必要的依赖
npm i sass -D
③准备定制样式
$xtxColor:#27ba9b;
$helpColor:#e26237;
$sucColor:#1dc779;
$warnColor:#ffb302;
$priceColor:#cf4444;@forward 'element-plus/theme-chalk/src/common/var.scss'
with (
$colors: (
'primary':(
//主色
'base':#27ba9b,
),
'success':(
//成功色
'base':#1dc779,
),
'warning':(
//警告色
'base':#ffb302,
),
'danger':(
//主色
'base':#e26237,
),
'error':(
//主色
'base':#cf4444,
),
),
);④覆盖ElementPlus样式
export default defineConfig({
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
//配置elementPlus采用sass样式配色
resolvers: [ElementPlusResolver({importStyle:"sass"})],
}),
],
css:{
preprocessorOptions:{//导入样式表
scss:{
//自动导入定制化样式文件进行样式覆盖
additionalData:`
@use "@/styles/element/index.scss" as *;
@use "@/styles/var.scss" as *;
`,
}
}
},⑤测试
按照以上步骤 应该能够在Vue.js 工程中成功引入并使用 ElemPlus。记得查看 Element Plus 的官方文档，了解更多关于组件的使用方法和高级特性。
3使用 Element Plus 主题生成工具
Element Plus 提供了一个主题生成工具（如在线工具或命令行工具），可以帮助你快速生成定制化的主题文件。这通常涉及到选择一个预设的主题或上传你自己的颜色配置，然后生成相应的 CSS 或 SCSS 文件。
①在线生成工具：访问 Element Plus 官网或相关社区页面，查找在线主题生成工具。
②命令行工具：Element Plus 可能会提供一个命令行工具来帮助你管理主题。
（二）常用主题
Element Plus 本身并没有预设的“常用主题”列表，因为主题通常是根据项目的具体需求来定制的。然而，Element Plus 提供了一套默认的样式和变量，这些变量可以被修改以创建自定义主题。在 Element Plus 中，自定义主题通常涉及到修改 SCSS 变量，这些变量控制了组件的颜色、边框、阴影等视觉元素。
1、颜色变量
①--color-primary：主色调，常用于按钮、输入框等组件的默认颜色。
②--color-success：成功色调，用于表示成功状态的元素。
③--color-warning：警告色调，用于表示警告状态的元素。
④--color-danger：危险色调，用于表示错误或危险状态的元素。
⑤--color-info：信息色调，用于表示中性或信息状态的元素。
2、主题设计方向
①品牌风格统一：将 Element Plus 的主题颜色与项目的品牌色保持一致，以增强品牌的识别度和一致性。
②色彩对比与和谐：确保主题颜色之间的对比度和和谐度，以提高界面的可读性和美观度。
③明暗模式支持：根据用户需求，为应用提供明暗两种主题模式，以适应不同的使用场景和偏好。
④响应式设计：确保主题在不同屏幕尺寸和设备上都能保持良好的显示效果，提升用户体验。
Element Plus 常用主题实际上是根据项目需求定制的，通过修改颜色变量和其他样式属性来实现不同的视觉风格。
（三）大厂主题
多看一些app网站 积累经验 打下基础
