Element Plus如何使用在工程中，如何覆盖主题及常用主题(详细记录，值得一看）

 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网站 积累经验 打下基础