element找不到elements可以找到 elements not defined in the template

转载

mob64ca140c75c7 2024-05-10 20:39:29

文章标签 vue.js element css sass Babel 文章分类 机器学习人工智能

写这篇文章之前，我已经查过百度搜索 primordials is not defined 结果前五条，均是通过降低 Node.js 版本或者多 Node.js 环境共存的方案，保证编译环境为 Node.js v10.x ，这里我并不想这样做，其实我是已经解决了问题才去搜索百度的，因为我不希望让你不幸看到了重复而无用的解决方案，而浪费你的时间。

原文讲述的是在苹果系统下的开发

macOS Catalina 10.15.7

现在根据原文转换成window10系统下的操作，先说一下我项目的版本：

Node.js v14.15.4
@vue/cli 4.5.11
element-ui 2.15.0

在当前操作环境下是没有问题的，重点是不需要降级 Node.js，也不需要搞多个 Node.js 环境，你大概只需要对安装的包稍作调整即可。

非官方正确步骤

我的 Vue.js 项目依赖包管理器是 npm ，如果你是 yarn ，对应调整。

请安装如下配置 ElementUI 主题相关的包：

npm i element-themex element-theme-chalk -D

这就完啦？是的。。。其它的就跟官方一样了，我顺便写一下。

通过以下命令创建完整的 element-variables.scss 文件：

node_modules/.bin/et -i

这时会出现，'node_modules' 不是内部或外部命令，也不是可运行的程序或批处理文件。

原因是在windows系统中要用反斜杠

修改后的，在window系统下命令：

.\node_modules\.bin\et -i

按照官方文档，这一步就会报错，不过按照我的步骤应该没有问题了。接着打开新创建，尝试性修改 $--color-primary 成其他颜色，例如：

$--color-primary: red !default;

接着进行编译，执行如下命令：

.\node_modules\.bin\et

就会自动生成大量的文件，存放在项目根目录的 theme 下，一般来说项目都有配置按需引入，此时接着修改 babel.config.js 文件：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: '~theme',
      },
    ],
  ],
}

重新启动项目，可以看到整体主题色的主色变成了红色，这就算大功告成了。

补充说明

在执行主题配置文件的修改后编译，我这里会一直报错，其实没什么影响，错误信息如下：

⠼ build element theme
  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

  Replace Autoprefixer browsers option to Browserslist config.
  Use browserslist key in package.json or .browserslistrc file.

  Using browsers option can cause errors. Browserslist config
  can be used for Babel, Autoprefixer, postcss-normalize and other tools.

  If you really need to use option, rename it to overrideBrowserslist.

  Learn more at:
  https://github.com/browserslist/browserslist#readme
  https://twitter.com/browserslist

如果你在意，可以试试修改 .browserslistrc ，我恰巧看到有人发了个 fix ，不过被关了，有兴趣可以自己试试，详情阅读：fix: node.js 12 error primordials is not defined，当然我觉得也许你也可以通过修改编译配置中的 browsers 属性解决，我没实验，仅供参考~