vue-cli. 版本为2.9.6 element 2.15.7
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：
{
"presets": [["babel-preset-env", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
babel-preset-env 无需下载在构建项目的时候已经下好，我们直接引用就行。
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';
Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
* Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
我们还需要注意一下以下的这几个组件,不光是引入
import { Loading,MessageBox,Message,Notification} from 'element-ui';
Vue.use(Loading.directive);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
到这里其实我们已经配置完事了，有一些同学路由使用的是import异步来引用的。这个时候不管是打包还是运行都会报 () => import('.vue'). 这样的错误。有两个解决方案。
一、把import修改为resolve引入
resolve => require(['@/view/dashboard/Index.vue'], resolve)
二、或者下载babel-plugin-syntax-dynamic-import
npm install babel-plugin-syntax-dynamic-import -D
将 .babelrc 修改为：
{
"presets": [["babel-preset-env", { "modules": false }],"env"],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
],
"syntax-dynamic-import"
]
}
有一些疑惑就是官方是引用的es2015
image.png
引导我们安装
npm install babel-preset-es2015 --save-dev
本人感觉没有必要去安装babel-preset-es2015。官方已不在维护ES2015 / ES2016/ ES2017 等等 ES20xx 版本，取而代之的是 babel-preset-env，并且承诺它将成为“未来不会过时的（future-proof）”解决方案。而且我们构建项目的时候已经安装babel-preset-env。所以推荐使用babel-preset-env
