项目中遇到的问题,记录一下,也提供给有需要的小伙伴一个选择 ,也是在网上东拼西凑的,希望能帮到有需要的人

1.首先基于vue框架,用的 element-ui

这个不必多说,我会在下面多说一些中间的坑~

2.element-ui 自定义主题下载,命令行主题工具,npm下载

小黑框(命令窗口,以下简称小黑框)执行

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

3.初始化变量文件

 小黑框执行

et -i element-variables.scss

成功后如下提示

> ✔ Generator variables file

执行成功后当前目录(我的是在根目录下)会有一个 element-variables.scss 文件。内部包含了主题所用到的所有变量,它们使用 SCSS 的格式定义。大致结构如下:

// element-variables.scss 文件

$--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;

...

嘿嘿~我就是在这坑就开始连绵不绝了~~~~执行 et 之后报错

原因:电脑防止执行不信任的脚本。说白了就是没这个权限

解决:win 键直接搜索 windows PowerShell,管理员身份运行

打开窗口后执行:

set-ExecutionPolicy RemoteSigned

会出现:

执行策略更改
执行策略可帮助你防止执行不信任的脚本。更改执行策略可能会产生安全风险,如 https:/go.microsoft.com/fwlink/?LinkID=135170
中的 about_Execution_Policies 帮助主题所述。是否要更改执行策略?
[Y] 是(Y)  [A] 全是(A)  [N] 否(N)  [L] 全否(L)  [S] 暂停(S)  [?] 帮助 (默认值为“N”):

选 Y 然后回车,执行查看:

// 查看是否成功

get-ExecutionPolicy

会出现:

// 成功后提示

RemoteSigned

这时候再次到命令窗口执行 et ,问题解决

4.修改变量

直接编辑 element-variables.scss 文件,例如修改主题色为红色。

// element-variables.scss 文件

$--color-primary: red;

5.编译主题

小黑框执行

et

成功后如下提示,根目录也会生成一个 theme 文件夹 (和 src 同层级)

> ✔ build theme font
> ✔ build element theme

6.引入自定义主题

main.js 中引入

import '../theme/index.css'

不需要之前的 element css样式了

// 不需要引入这个了

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

到这里了,其实没有切换主题的话就已经大功告成了,下面开始切换主题的步骤

7.使用 gulp-css-wrap 插件

这个插件我也是第一次用,似懂非懂,接着肝~~~

小黑框执行:

// 这有个坑,在后面才踩到,也可能有的小伙伴没有坑

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

8.在项目根目录创建 gulpfile.js 的文件

如果创建不了文件(别问,我也挺懵,直接不给你创建这个文件 😶),可以试试 cnpm

文件里复制:

// 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'))
    /* 找需要添加命名空间的css文件,支持正则表达式 */
        .pipe(cssWrap({

            // 这个 .custom-02abfd 相当于要给 body 添加的 class
            
            selector: '.custom-02abfd' /* 添加的命名空间 */
        }))
        .pipe(cleanCSS())
        .pipe(gulp.dest('src/assets/css/theme/02abfd')) /* 存放的目录 */
})

9. 生成主题文件

小黑框执行:

gulp css-wrap

报错的话小黑框执行(我是这么解决的):

npm install gulp -g

会生成在 src/assets/css/theme/02abfd 的文件 ,然后把之前步骤 5 生成的 theme 文件下的 fonts 文件复制一份到 02abfd 文件里

10.store文件存储主题状态(vuex)

// store/index.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    themeColor: "3baaa3"
  },
  mutations: {
    //更新主题颜色
    setThemeColor(state, curColor) {
      state.themeColor = curColor;
    }
  },
  actions: {},
  modules: {}
});

11. main.js 中引入

import "./assets/css/theme/3baaa3/index.css"; //邮储青

12.配置utils下的index.js文件

// 换肤加class函数
export function toggleClass(element, className) {
    if (!element || !className) {
      return;
    }
    element.className = className;
}

13.在切换主题的页面编辑

// script 标签中引入

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);
      }
    }
  }

根据 themecolor 的值切换不同的颜色

切换颜色前,重复步骤 4,5,8(换里面的类名和文件存放的目录),9,11(把需要引入的样式文件都引入,共存状态)

最后:有的插件下载后还报错,可以试试 cnpm,有时候挺灵异的,我的就出现了,不过我忘了是哪个步骤用 cnpm 了

Logo

前往低代码交流专区

更多推荐