Home > Web Front-end > JS Tutorial > body text

Use elementUI to implement custom theme methods in Vue

亚连
Release: 2018-06-05 09:27:16
Original
2083 people have browsed it

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
Copy after login

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
Copy after login

2. Initialize the variable file

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

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;
...
Copy after login

3. Modify variables

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

$--color-primary: purple;
Copy after login

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
Copy after login

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)
Copy after login

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>
Copy after login
Copy after login

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
Copy after login

2, install vue-cli in the project directory:

npm i -g vue-cli
Copy after login

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

vue init webpack vue-project
Copy after login

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

cd vue-project
npm i
npm run dev
Copy after login

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
Copy after login

2, install sass-loader, node-sass

npm i sass-loader node-sass -D
Copy after login

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: &#39;../node_modules/element-ui/lib/theme-chalk/fonts&#39;;
@import "../node_modules/element-ui/packages/theme-chalk/src/index";
Copy after login

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

import Vue from &#39;vue&#39;
import Element from &#39;element-ui&#39;
import &#39;./element-variables.scss&#39;
Vue.use(Element)
Copy after login

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>
Copy after login
Copy after login

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:

By creating tags in js dynamics and setting attribute methods (detailed tutorial)

Achieved in jQuery Methods for adding and assigning tag sub-elements

How to change the P tag text value in jQuery

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!