element-ui在应用自定义主题时,分两种状况给出教程:
- 1.我的项目中用到scss
- 2.我的项目中没用到scss
留神:本文提及我的项目中没用到scss,本文所有内容基于这一点给出实践经验,所以我的项目中用到scss的同学能够调头了。
问题:在依照element-ui官网文档应用自定义主题时遇到以下问题:当我用命令行工具初始化变量文件,执行命令 et -i时,控制台窗口报错:ReferenceError: primordials is not defined。
起因:通过查阅材料,剖析出是以后应用的node版本过高导致的,而且网友统一倡议应用node11.15.0,通过实际,最初终于胜利初始化变量文件,后续步骤一路绿灯。
胜利截图:
解决步骤(严格依照本教程来,每一步都不要省略,每一条命令都不要有差别):
以下命令间接win+r输出cmd执行
卸载:
1、卸载cnpm
`npm uninstall cnpm -g`
2、卸载vue-cli
`npm uninstall @vue/cli -g`
3、卸载nodejs和删除文件
C:Program /Files (x86)/nodejs或者C:Program/ Files/nodejs
C:Users/Administrator/AppData/Roamingnpm或者C:Users/Administrator/AppData/Roaming/npm-cache`
装置:
1、装置稳定版node
关上此网址https://nodejs.org/download/release/v11.15.0/node-v11.15.0-x64.msi`
2、装置淘宝镜像cnpm
`npm install -g cnpm --registry=https://registry.npm.taobao.orgnpm config set registry https://registry.npm.taobao.org`
3、装置vue-cli
`cnpm install @vue/cli -g`
(以下命令要进入我的项目文件夹内执行)
4、进入我的项目文件
删除 package-lock.json
文件和node_modules
文件夹
5、编辑package.json文件
删除两行
`"element-theme": "^2.0.1", "element-theme-chalk": "^2.13.0",`
6、重新安装依赖
`cnpm i`
`cnpm i element-theme -g`
`cnpm i element-theme-chalk -D`
8、初始化全局变量文件
`et -i`
9、创立theme文件夹
`et`
10、在main.js引入
import '../theme/index.css'
测试:关上element-variables.scss,批改$--color-success: #0d0e0d !default;//彩色,在你的页面内加一个胜利按钮
<el-button type="success" round>胜利按钮</el-button>
发现这个胜利按钮变成了彩色,也就是你自定义的色彩,阐明批改主题文件曾经失效。
如有有余,恳请斧正!!