按需引入 elementui 出现 babel-preset-es2015 报错1. npm 安装 2. 安装 babe

一、 element-ui 按需引入

项目使用vue cli3脚手架工具构建，按照element 官方文档中所示

1. npm 安装

npm i element-ui -S

2. 安装 babel-plugin-component：

npm install babel-plugin-component -D

3. 安装es2015

npm install babel-preset-es2015 --save-dev

4.安装@babel/preset-env

npm i @babel/preset-env -D

5.修改.babelrc文件，把es2015改成@babel/preset-env

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

6.重跑项目即可

其实.babelrc的配置项，可以写入到babel.config.js文件中，之后不再需要.babelrc文件了

7. src 目录下新建 plugins 文件夹，里面新建 element.js，引入需要使用的组件并 use 即可

import Vue from 'vue'
import {
  Button,
  Form,
  FormItem,
  Input,
  Message } from 'element-ui'

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
// 把弹框组件挂载到 Vue 原型对象上，每个组件使用时 this.$message 即可
Vue.prototype.$message = Message

二、报错信息说明

问题出在第二步，用 vue3.0 搭建的脚手架，只有一个 babel-config.js 的文件夹，但是把放进这个文件夹会报错，所以我在项目根目录新建了一个.babelrc文件，运行时发现报错es2015什么的，于是运行 npm install babel-preset-es2015 --save-dev 安装es2015。

Error: Cannot find module 'babel-preset-es2015' from 'C:\Users\Administrator\Des
ktop\vueProject\vuedemo'

安装完成还是报错，修改 .babelrc 文件即可

plugin/preset files are not allowed to export objects, only functions