Vue's elementUI implements custom themes and vueelementui

Vue's elementUI implements custom themes and vueelementui

The vue development project and elementUI are used. According to the official website, we can customize themes to meet our project requirements. The following describes the specific steps to implement the two methods, first, the project is not written using scss, and the theme tool is used (more)

Method 1: Use the command line theme Tool

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

I. Install tools

1. Install theme Tool

npm i element-theme -g

2. Install the chalk topic. you can install it from npm or pull the latest code from GitHub.

# Npmnpm I element-theme-chalk-D # https://github.com/ElementUI/theme-chalk-D from GitHubnpm I

Ii. initialize the variable File

Et-I [variable files that can be customized, element-variables.scss by default]> Generator variables file

A element-variables.scss (or a custom file) is generated under 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, such as modifying the theme color to the color you need (for example: purple (purple ))

$--color-primary: purple;

Iv. Compile the topic

After modifying the variable, compile the topic (if the variable is modified again after compilation, re-compile the variable)

et>  build theme font>  build element theme

5. Introduce custom themes

The last step is to introduce the compiled theme file to the project (the compiled file is in the theme file under the root directory by default, or you can specify the packaging directory through the-o parameter. introduce in js

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

Write some styles in the project to see if the theme color changes: (the theme color changes to purple)

Default button Main button Success button Information Button Warning button Dangerous button

Method 2: directly modify the element style variable

Directly modify the style variable of the element in the project (provided 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 the following command line in sequence to run vue-project

cd vue-projectnpm inpm run dev

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

1. install element-ui

npm i element-ui -S

2. Install sass-loader and node-sass

npm i sass-loader node-sass -D

You do not need to configure webpack. base. conf. js file. vue-loader configures the corresponding loader according to different types of files to package our style files (For details, refer to the core code of vue-loader)

3. Change element style Variables

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

/* Change the theme color variable */$ -- color-primary: teal;/* change the icon font path variable, required */$ -- 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 in the main. js file.

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

Let's take a look at the effect. Introduce some styles in the file, such as button.

Default button Main button Success button Information Button Warning button Dangerous button

The default color has changed to our custom, and there are other changes to change the variable in the element-variable.scss file.