乐趣区

关于前端:elementui-自定义主题的坑ReferenceError-primordials-is-not-defined

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>
发现这个胜利按钮变成了彩色,也就是你自定义的色彩,阐明批改主题文件曾经失效。
如有有余,恳请斧正!!

退出移动版