vue-cli. 版本為2.9.6 element 2.15.7
借助 babel-plugin-component，我們可以只引入需要的組件舔痕，以達(dá)到減小項(xiàng)目體積的目的梢褐。
首先，安裝 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 無需下載在構(gòu)建項(xiàng)目的時(shí)候已經(jīng)下好，我們直接引用就行耿眉。
接下來边翼，如果你只希望引入部分組件，比如 Button 和 Select鸣剪，那么需要在 main.js 中寫入以下內(nèi)容：
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);
/* 或?qū)憺? * Vue.use(Button)
* Vue.use(Select)
*/
new Vue({
el: '#app',
render: h => h(App)
});
我們還需要注意一下以下的這幾個(gè)組件,不光是引入
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;
到這里其實(shí)我們已經(jīng)配置完事了组底，有一些同學(xué)路由使用的是import異步來引用的。這個(gè)時(shí)候不管是打包還是運(yùn)行都會(huì)報(bào) () => import('.vue'). 這樣的錯(cuò)誤筐骇。有兩個(gè)解決方案债鸡。
一、把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
引導(dǎo)我們安裝
npm install babel-preset-es2015 --save-dev
本人感覺沒有必要去安裝babel-preset-es2015厌均。官方已不在維護(hù)ES2015 / ES2016/ ES2017 等等 ES20xx 版本，取而代之的是 babel-preset-env告唆，并且承諾它將成為“未來不會(huì)過時(shí)的（future-proof）”解決方案棺弊。而且我們構(gòu)建項(xiàng)目的時(shí)候已經(jīng)安裝babel-preset-env。所以推薦使用babel-preset-env
