共计 1290 个字符,预计需要花费 4 分钟才能阅读完成。
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.org
npm 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>
发现这个胜利按钮变成了彩色,也就是你自定义的色彩,阐明批改主题文件曾经失效。
如有有余,恳请斧正!!