Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use Vue's elementUI to achieve custom theme related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to use Vue's elementUI to achieve custom theme will have a harvest, let's take a look.

The first method: use the command line theme tool

Use vue-cli to install the project and introduce element-ui (see the second method for details)

I. installation tools

1. Install the theme tool

Npmielement-theme-g

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

# from npm

Npmielement-theme-chalk-D

# from GitHub

Npmi https://github.com/ElementUI/theme-chalk-D

Initialize the variable file

Et-i [variable file can be customized, default is element-variables.scss]

✔ Generatorvariablesfile

At this point, element-variables.scss (or custom files) will be generated under the root directory, roughly as follows:

$--Colorcolor color color collection 409 EFFsets 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*/

$--Colormuri color flower 67c23acolors default

$- Colour warningPluto eb9e05colors default

$--Colorpower dangerPlux fa5555 default

$--colorcolor _ info _ virtual _ 878d99 _ blank default

...

Third, modify variables

Edit the element-variables.scss file directly, such as changing the theme color to your desired color (e.g. purple (purple))

$--color-primary:purple

IV. Compilation theme

After modifying the variables, compile the theme (if you modify the variables again after compilation, you need to recompile)

Et

✔ buildthemefont

✔ buildelementtheme

Fifth, introduce custom theme

Finally, introduce the compiled theme file into the project (the compiled file is under the theme file in the root directory by default, or you can specify the packaging directory through the-o parameter), and introduce it into the entry file main.js

Import'../theme/index.css'

ImportElementUIfrom'element-ui'

ImportVuefrom'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

Danger button

The second method: directly modify element style variables

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

First, install a new project with vue-cli:

1. Install vue:

Npmi-gvue

2. Install vue-cli in the project directory:

Npmi-gvue-cli

3. Build a new project based on webpack (vue-project)

Vueinitwebpackvue-project

4, enter the following command line and run vue-project

Cdvue-project

Npmi

Npmrundev

Second, install elementUI and sass-loader,node-sass (plug-ins that you need to rely on in the project to write using scss)

1, install element-ui

Npmielement-ui-S

2, install sass-loader,node-sass

Npmisass-loadernode-sass-D

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

3. Change element style variables

1. Create an 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 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"

two。 Just import the above file into the entry file main.js.

ImportVuefrom'vue'

ImportElementfrom'element-ui'

Import'./element-variables.scss'

Vue.use (Element)

Take a look at the effect and introduce some styles into the file, such as button

Default button

Main button

Success button

Information button

Warning button

Danger button

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

This is the end of the article on "how to use Vue's elementUI to implement custom themes". Thank you for reading! I believe that everyone has a certain understanding of "how to use Vue's elementUI to achieve custom themes" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.