vue + element-ui 自定义主题，自定义主题切换_vue+elment 实现对一个页面的自定义修改

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

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 的文件

如果创建不了文件（别问，我也挺懵，直接不给你创建这个文件