012在Vue3中引入element-plus并设置主题默认颜色_vue3+element plus 手写主题样式

012在Vue3中引入element-plus并设置主题默认颜色

安装与引入element-plus

• 安装npm install element-plus --save：https://element-plus.gitee.io/zh-CN/guide/installation.html
• 引入

// 引入element-plus
import ElementPlus from 'element-plus';
// 主题样式封装在这个scss文件中
import './assets/main.scss';

import App from './App.vue';

const app = createApp(App);

// 这里挂载到Vue3中，支持设置默认尺寸的，浮动zIndex的值
app.use(ElementPlus, { size: 'small', zIndex: 2022 });
1
2
3
4
5
6
7
8
9
10
11

element-plus的主题封装与颜色设置

• 主题颜色封装web-client\ui\src\assets\base.scss

// 这里是设置主要颜色的地方，更多的颜色参考：https://github.com/element-plus/element-plus/blob/dev/packages/theme-chalk/src/common/var.scss
$--colors: (
  'primary': (
    'base': #009fa8,
  ),
  'success': (
    'base': #21ba45,
  ),
  'warning': (
    'base': #f2711c,
  ),
  'danger': (
    'base': #db2828,
  ),
  'error': (
    'base': #db2828,
  ),
  'info': (
    'base': #42b8dd,
  ),
);

// 需要修改的样式在这里配置
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: $--colors,
  $button-padding-horizontal: (
    'default': 50px,
  )
);

// 导入所有样式，注意：引入这个之后，在main.ts入口文件中无须在引入element-plus的样式
@use 'element-plus/theme-chalk/src/index.scss' as *;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

• 主题样式入口文件web-client\ui\src\assets\main.scss

// 注意：使用@use引入，不要用@import
@use "./base.scss";
1
2