Vue's elementUI implements custom themes

Use vue to develop projects and use 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 document to customize 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 installs the project and introduces element-ui (for details, please refer to the introduction in the second method)

1. Install tools

1, install theme tools

npm i element-theme -g

2. To 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 Customized file), 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 ( 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 recompile)

et
> ✔ build theme font
> ✔ build element theme

5 ,Introducing a custom theme

The last step is to introduce the compiled theme file into the project (the compiled file is under the theme file in the root directory by default, you can also specify the packaging directory through the -o parameter), in the entry file Introduce

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

into main.js and write some styles in the project to see if the theme color changes: (theme color changes to purple)

<p>
  <el-button>默认按钮</el-button>
  <el-button>主要按钮</el-button>
  <el-button>成功按钮</el-button>
  <el-button>信息按钮</el-button>
  <el-button>警告按钮</el-button>
  <el-button>危险按钮</el-button>
 </p>

Second method: Directly modify the element style variable

Directly modify the style variable of element in the project (provided that your document is also written using scss)

1. First install a new project with vue-cli:

1, install vue:

npm i -g vue

2, install vue-cli in the project directory:

npm i -g vue-cli

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

vue init webpack vue-project

4. Enter the following command lines in sequence and run vue-project

cd vue-project
npm i
npm run dev

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

1, Install element-ui

npm i element-ui -S

2, install sass-loader, node-sass

npm i sass-loader node-sass -D

Let me talk here, there is no need to configure the webpack.base.conf.js file, vue-loader will be based on Different types of files are used to configure corresponding loaders to package our style files (if you are interested, you can look at the core code of vue-loader)

3. Change the element style variable

1. Under src Create the element-variables.scss file (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. Introduce the above file into the entry file main.js

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

Take a look To see the effect, introduce some styles into the file to see, such as button

<p>
  <el-button>默认按钮</el-button>
  <el-button>主要按钮</el-button>
  <el-button>成功按钮</el-button>
  <el-button>信息按钮</el-button>
  <el-button>警告按钮</el-button>
  <el-button>危险按钮</el-button>
 </p>

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

Related recommendations:

elementui’s default style modification method sharing

vue 2.0 and elementUI implement breadcrumb navigation bar method code

Use the vue+elementUI part to introduce the implementation method of the component

The above is the detailed content of Vue's elementUI implements custom themes. For more information, please follow other related articles on the PHP Chinese website!