Vue + element UI custom theme, custom theme switching

         Record the problems encountered in the project, and provide a choice for small partners in need. It is also pieced together online. I hope it can help people in need

1. Firstly, based on vue framework, use element UI

There is no need to say more about this. I will say more about the middle pit below~

2. Element UI custom theme download, command line theme tool, npm Download

Small black box (command window, hereinafter referred to as small black box) execution

npm i element-theme -g
npm i element-theme-chalk -D

3. Initialize variable file

  Small black box execution

et -i element-variables.scss

After success, the following prompt is displayed

> ✔ Generator variables file

After successful execution, the current directory (mine is under the root directory) will have a   element-variables.scss   File. The internal contains all variables used by the topic, which are defined in the format of SCSS. The general structure is as follows:

// element-variables.scss file

$--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: #e6a23c !default;
$--color-danger: #f56c6c !default;
$--color-info: #909399 !default;

...

Hey, hey, it's here that I started to run continuously ~ ~ ~ report an error after executing et

Cause: the computer prevents the execution of untrusted scripts. To put it bluntly, I just don't have this permission.

Solution: use the win key to search windows PowerShell directly and run it as an administrator

Execute after opening the window:

set-ExecutionPolicy RemoteSigned

The following message appears:

Execute policy changes
 Execution policies help you prevent untrusted scripts from executing. Changing the execution policy may create security risks, such as https:/go.microsoft.com/fwlink/?LinkID=135170
 Medium about_Execution_Policies The help topic describes. Do you want to change the execution policy?
[Y] yes(Y)  [A] All(A)  [N] no(N)  [L] All no(L)  [S] suspend(S)  [?] help (The default value is“ N"):

Select Y and press enter to view:

// Check for success

get-ExecutionPolicy

The following message appears:

// Prompt after success

RemoteSigned

At this time, go to the command window again to execute et, and the problem is solved

4. Modify variables

Direct editing   element-variables.scss   For example, change the theme color to red.

// element-variables.scss file

$--color-primary: red;

5. Compiling topics

Small black box execution

et

After success, you will be prompted as follows, and a theme folder (at the same level as src) will also be generated in the root directory

> ✔ build theme font
> ✔ build element theme

6. Import custom theme

Introduced in main.js

import '../theme/index.css'

The previous element css style is no longer needed

// There's no need to introduce this

import 'element-ui/lib/theme-chalk/index.css';

That's it. In fact, it's done without switching the theme. Let's start the steps of switching the theme

7. Use the gulp CSS wrap plug-in

This plug-in is also the first time I use it. It seems that I don't understand it, and then I can't understand it~~~

Small black box execution:

// There's a pit here. I stepped on it at the back. Maybe some little friends don't have a pit

npm install gulp
npm install gulp-clean-css
npm install gulp-css-wrap

8. Create the gulpfile.js file in the project root directory

If you can't create a file (don't ask, I'm also confused. I won't create this file for you directly 😶), You can try cnpm

Copy in file:

// gulpfile.js

var path = require('path')
var gulp = require('gulp')
var cleanCSS = require('gulp-clean-css')
var cssWrap = require('gulp-css-wrap')
gulp.task('css-wrap', function () {
    return gulp.src(path.resolve('./theme/index.css'))
    /* Find the css file that needs to add namespace and support regular expressions */
        .pipe(cssWrap({

            // This. custom-02abfd is equivalent to the class to be added to the body
            
            selector: '.custom-02abfd' /* Added namespace */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/02abfd')) /* Directory of storage */
})

9. Generate theme file

Small black box execution:

gulp css-wrap

If an error is reported, execute in a small black box (this is how I solve it):

npm install gulp -g

Will be generated in   src/assets/css/theme/02abfd, and then copy a copy of the fonts file under the theme file generated in step 5 to   02abfd file

10.store file stores topic status (vuex)

// store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    themeColor: "3baaa3"
  },
  mutations: {
    //Update theme colors
    setThemeColor(state, curColor) {
      state.themeColor = curColor;
    }
  },
  actions: {},
  modules: {}
});

11. Introduced in main.js

import "./assets/css/theme/3baaa3/index.css"; //Postal savings green

12. Configure the index.js file under utils

// Skin change plus class function
export function toggleClass(element, className) {
    if (!element || !className) {
      return;
    }
    element.className = className;
}

13. Edit on the page of switching topics

// script tag

import { toggleClass } from "../utils/index";

mounted() {
    toggleClass(document.body, "custom-" + this.themecolor);
    let curcolor = this.$store.state.themeColor;

  },
  computed: {
    themecolor: {
      get() {
        return this.$store.state.themeColor;
      },
      set(val) {
        this.$store.commit("setThemeColor", val);
      }
    }
  },
  watch: {
    themecolor: {
      handler() {
        toggleClass(document.body, "custom-" + this.themecolor);
      }
    }
  }

Switch different colors according to the value of themecolor

Before switching colors, repeat steps 4, 5 and 8 (change the class name and the directory where the files are stored), 9 and 11 (import all the style files to be imported and coexist)

Finally: some plug-ins still report errors after downloading. You can try cnpm. Sometimes it's strange. Mine appears, but I forgot which step to use cnpm

Tags: Front-end Vue Vue.js UI

Posted on Fri, 26 Nov 2021 19:31:00 -0500 by Toonster