解决按照Element官网步骤按需引入组件运行时报错：Error: Cannot find module ‘babel-preset-es2015‘

最新推荐文章于 2023-11-01 15:05:02 发布

好运.

最新推荐文章于 2023-11-01 15:05:02 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.csdn.net/pink_cz/article/details/126148497

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中全局安装和使用Element-UI，以及按需引入的步骤和注意事项。针对新版本Vue CLI，强调了配置文件从.babelrc变为babel.config.js，并提醒开发者注意不同版本脚手架的配置差异，以避免按需引入时的报错问题。

摘要由CSDN通过智能技术生成

全局注册element-ui及使用

安装
npm i element-ui -S

在main.js中全局注册组件，引入全局样式

// 引入 element组件库
import ElementUI from "element-ui";
// 
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

之后就可以使用了…

主要讲解按需引入碰到的坑及报错。

按需引入

除了安装element-ui之外还要借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

npm install babel-plugin-component -D

官方说的是直接在 .babelrc 文件夹下写入以下配置：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这个是可以的，但是你要注意自己的脚手架版本
按照官网步骤修改 .babelrc 文件时，注意：用vue脚手架创建的项目是找不到 .babelrc文件的，这是旧版本的脚手架才有的，新版本在vue脚手架创建的 babel.config.js 文件修改即可。
在这里插入图片描述
注意：如果是在 babel.config.js 文件下的话是写如下配置，如果是 .babelrc 文件要用上边的配置，两者是有区别的：

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