Error:Cannot find module：babel-preset-es2015

Error:Plugin/Preset files are not allowed to export objects, only functions. In...

---

在使用ElementUI组件时，有完整引入和按需引入；完整引入时请求的资源较大，所以可以进行按需引入，根据自己的需要来引入自己想要的组件并进行相关的配置。

ElementUI官方完整引入和按需引入介绍

按照官方的按需引入介绍，需要安装 babel-plugin-component

npm install babel-plugin-component -D

1、配置babel.config.js文件

对项目中的 .babelrc 文件内容进行修改，但是，在这里出现了问题，由于我所使用的Vue脚手架版本较新，所以脚手架在开始搭建环境时并没有创建这个文件，代替它的是 babel.config.js文件。——所以这里应该是修改babel.config.js文件才对。

其中蓝色部分是脚手架创建环境时写入的配置，不要删掉，将官方描述中presets后的配置项追加到自己babel.config.js文件中就好了，plugins与presets平级，粘贴进来即可。

2、配置main.js文件

官方介绍中是这样的：

我们使用ElementUI组件库，前提肯定已经有Vue项目了，所以main.js也已经存下了，我们只需要做两个操作：

1、从element-ui组件库中引入组件

// 从element-ui中引入 Button和Row组件
import { Row,Button} from 'element-ui'; 
/*注意下：
    由于我只用到了row组件和button组件，所以这里只对这两个进行了引入，
    如果还有用到别的，应该追加进去来提取所需组件。
*/

2、注册Vue全局组件 

// 通过Vue.component来注册全局组件，可供所有组件使用
// Vue.component(Button.name, Button); 
Vue.component('xibing-button', Button);
Vue.component(Select.name, Select);
/*
    可以对第一个参数进行修改，这里的第一个参数默认是 Xxx组件名.name （首字母大写）
       如果不修改，那么在结构中的组件就应该是 <el-xxx></el-xxx> （组件名小写）
       如果修改了，例如上面Button的组件名是xibing-button，那么结构中就应该写<xibing-button></xibing-button>
*/

注意：如果是完整引入，需要引入css文件；按需引入则不需要引入css文件，项目内部会自动根据main.js中的需求引入和babel.config.js中的配置来调用css完整样式中的部分样式。

3、将组件添加到结构中

上面是官网中我要用到的那部分，复制粘贴到自己的Vue结构中

红色框内注意：由于main.js中对Button的组件名修改了，所以这边应该对应上

4、运行项目

VS Code终端内 npm run serve 运行时报错：

我一看，Cannot find model 这不就是说咱项目里没有后面的这个模块吗，想着安装就没问题 

所以开始安装这个模块依赖

但是，安装完后，重新运行又报新错误：

Error: Plugin/Preset files are not allowed to export objects, only functions. In ...

 才发现，原来是因为这里(官网中)的配置比较旧，而我的vue-cli比较新，新旧冲突，查资料解决办法是：修改配置！

["es2015", { "modules": false }]  修改为：["@babel/preset-env", { "modules": false }]

修改后重新运行正常！