How to use elementUI to implement custom theme methods in Vue

Below I will share with you an article on how to implement a custom theme using Vue's elementUI. It has a good reference value and I hope it will be helpful to everyone.

Use vue to develop projects and elementUI. According to the writing method of the official website, we can customize the theme to adapt to our project requirements. Here are the specific steps to implement the two methods. (You can refer to the official documentation. Define the theme official document), let me first say that the project does not use scss to write, and uses the theme tool method (more commonly used)

The first method: use the command line theme tool

Use vue-cli to install the project and introduce element-ui (for details, please refer to the introduction in the second method)

1. Installation tools

1. Install the theme tool

npm i element-theme -g

2. Install the chalk theme. You can install it from npm or pull the latest code from GitHub

# 从 npm
npm i element-theme-chalk -D
# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

2. Initialize the variable file

et -i [可以自定义变量文件，默认为element-variables.scss]
> ✔ Generator variables file

At this time, element-variables.scss (or a customized file) will be generated in the root directory, roughly as follows:

$--color-primary: #409EFF !default;
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */
$--color-success: #67c23a !default;
$--color-warning: #eb9e05 !default;
$--color-danger: #fa5555 !default;
$--color-info: #878d99 !default;
...

3. Modify variables

Directly edit the element-variables.scss file, for example, modify the theme color to the color you need (such as: purple) )

$--color-primary: purple;

4. Compile the theme

After modifying the variables, compile the theme (if the variables are modified again after compilation, you need to re-compile the theme) Compile)

et
> ✔ build theme font
> ✔ build element theme

5. Introduce a custom theme

The last step is to introduce the compiled theme file into the project (the compiled file defaults to In the theme file in the root directory, you can also specify the packaging directory through the -o parameter), introduce

import '../theme/index.css'
import ElementUI from 'element-ui'
import Vue from 'vue'
Vue.use(ElementUI)

in the entry file main.js, write some styles in the project, and see if the theme color changes: (Theme The color changes to purple)

<p>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 </p>

Second method: Directly modify the element style variable

Directly modify the element's style variable in the project, (The premise is that your document is also written using scss)

1. First, use vue-cli to install a new project:

1, install vue:

npm i -g vue

2, install vue-cli in the project directory:

npm i -g vue-cli

3, create a new project (vue-project) based on webpack

vue init webpack vue-project

4, enter in sequence The following command line, run vue-project

cd vue-project
npm i
npm run dev

2. Install elementUI, sass-loader, node-sass (use scss in the project to write dependent plug-ins)

1, install element-ui

npm i element-ui -S

2, install sass-loader, node-sass

npm i sass-loader node-sass -D

Let me tell you here, there is no need to configure webpack.base.conf. js file, vue-loader will configure the corresponding loader according to different types of files to package our style files (if you are interested, you can look at the core code of vue-loader)

3. Changes element style variables

1. Create element-variables.scss file under src (the name can be customized) and write the following code:

/* 改变主题色变量 */
$--color-primary: teal;
/* 改变 icon 字体路径变量，必需 */
$--font-path: '../node_modules/element-ui/lib/theme-chalk/fonts';
@import "../node_modules/element-ui/packages/theme-chalk/src/index";

2. At the entrance Just introduce the above file into the file main.js

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)

Let’s see the effect. Introduce some styles into the file to see, such as button

<p>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
 </p>

The default color has been changed to our custom Yes, if there are other changes, just change the variables in the element-variable.scss file.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use ngrok express to solve WeChat interface debugging problems

How to use vue-cli to write vue plug-ins

Using vuex under vue-cli (detailed tutorial)

The above is the detailed content of How to use elementUI to implement custom theme methods in Vue. For more information, please follow other related articles on the PHP Chinese website!