vue中按需引入elemen-ui组件时报错

如果不知道如何引入可以查看官方文档按需引入组件

按照官网中的按需引入操作时，运行项目，会出现Error: Cannot find module 'babel-preset-es2015' from 'F:\anyu' 错误
原因在于项目中没有这个模块，需要安装这个模块，运行命令npm i @babel/preset-env -D
安装成功后修改项目中的 .babelrc 文件，这个文件是自己新建的
将其改为

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

在项目的入口文件main.js中引入 需要使用的组件 如下所示

import Vue from 'vue'
import { Button, Select } from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Button)
Vue.use(Select)

就可以在项目中使用Button 和 Select组件了

第二种方式

如果使用vue脚手架搭建的项目中的根目录中有babel.config.js这个文件， 可以不用安装上述插件 直接在该文件中配置如下

安装这个插件 npm install babel-plugin-component -D

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

然后运行项目就可以将项目成功运行起来

如果还是报错在package.json文件的"devDependencies"字段中配置这3个插件版本

"devDependencies": {
    "@babel/preset-env": "^7.11.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "babel-plugin-component": "^1.1.1",
  }

然后运行命令 npm install 即可