elementUI 定制主题

 1. 用vue-cli安装一个新项目:

  2. 安装elementUI及sass-loader,node-sass

// 安装element-ui
npm i element-ui -S

// 安装sass
npm i sass-loader node-sass -D

命令行主题工具

https://element.eleme.cn/#/zh-CN/component/custom-theme

果你的项目没有使用 SCSS,那么可以使用命令行主题工具进行深层次的主题定制:

安装工具

首先安装「主题生成工具」,可以全局安装或者安装在当前项目下,推荐安装在项目里,方便别人 clone 项目时能直接安装依赖并启动,这里以全局安装做演示。

npm i element-theme -g

安装白垩主题,可以从 npm 安装或者从 GitHub 拉取最新代码。

# 从 npm
npm i element-theme-chalk -D

# 从 GitHub
npm i https://github.com/ElementUI/theme-chalk -D

初始化变量文件

主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参数指定文件输出目录。

et -i element-variables.scss

  6.编译主题

  

et

 

 7.引入自定义主题

 我们只需要引入theme/index.css即可

    最后一步,将编译好的主题文件引入项目(编译的文件默认在根目录下的theme文件下,也可以通过 -o 参数指定打包目录),在入口文件main.js中引入

element-theme初始化et -i报错primordials is not defined

是node.js版本过高不兼容,使用nvm下调到11.15.0

是node.js版本过高不兼容,使用nvm下调到11.15.0

是node.js版本过高不兼容,使用nvm下调到11.15.0

nvm下载地址:
https://github.com/coreybutler/nvm-windows/releases
下载的nvm-setup.zip

选择自己安装地址和node.js地址
安装过程中会提示node.js已经安装了的版本,是否nvm管理,选是

nvm设置镜像地址

node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

安装最新版 nvm install latest

primordials is not defined错误
这个错误可能需要node.js版本更改到11.15.0

命令:nvm install 11.15.0
使用11.15.0 nvm use 11.15.0
查看当前电脑上已经安装的全部node版本,正在使用中的版本号前有个星号:

nvm list

查看可用的(可下载的)全部node版本:

nvm ls available
原文地址:https://www.cnblogs.com/yeminglong/p/13930262.html