vue-cli腳手架引入element UI的正確打開方式

element UI官網教程：http://element-cn.eleme.io/#/zh-CN/component/quickstart

一、完整引入,直接了當，可是組件文件不是按需加載，形成多餘，不夠優雅

在 main.js 中寫入如下內容：

import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(Element);

new Vue({
  el: '#app',
  render: h => h(App)
});

　　

以上代碼便完成了 Element 的引入。須要注意的是，樣式文件須要單獨引入。

 

二、按需引入，須要配置babel文件 .babelrc

藉助 babel-plugin-component，咱們能夠只引入須要的組件，以達到減少項目體積的目的。

首先，安裝 babel-plugin-component：

npm install babel-plugin-component --save-dev

　　

而後，將 .babelrc 修改成：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

此時，vue-cli項目中.babelrc文件長這樣子　　

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime"]
}

接下來就要配置了，先來了解下各配置項用途

{
　　// 此項指明，轉碼的規則
  "presets": [
    ["es2015", {"modules": false }],  //須要npm install babel-preset-es2015 --save-dev
// env項是藉助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉碼，而且設置amd,commonjs這樣的模塊化文件，不進行轉碼
// compiles ES2015+ down to ES5 具體見babel-preset-env官網：https://www.npmjs.com/package/babel-preset-env
    ["env", { "modules": false }],  // 下面這個是不一樣階段出現的es語法，包含不一樣的轉碼插件//可參考babel官網
    "stage-2"
  ],
  "plugins": [//// 下面這個選項是引用插件來處理代碼的轉換，transform-runtime用來處理全局函數和優化babel編譯
     "transform-runtime",
     //須要npm install babel-plugin-component -D//官網：http://element-cn.eleme.io/#/zh-CN/component/quickstart
     ["component", [{
        "libraryName": "element-ui",           //按需引用element-ui插件
        //"styleLibraryName": "theme-default"   //按需引用element-ui主題 
     }]]   
  ],// 下面指的是在生成的文件中，不產生註釋
  "comments": false,// 下面這段是在特定的環境中所執行的轉碼規則，當環境變量是下面的test就會覆蓋上面的設置
  "env": {// test 是提早設置的環境變量，若是沒有設置BABEL_ENV則使用NODE_ENV，若是都沒有設置默認就是development
    "test": {
      "presets": ["env", "stage-2"],// instanbul是一個用來測試轉碼後代碼的工具
      "plugins": [ "istanbul" ]
    }
  }
}

OK，到這步已經配完了?

可是你會發如今npm install babel-preset-es2015 時，你會發現有以下的 Deprecated警告：

deprecate babel-preset-es2015@* ????  Thanks for using Babel: we recommend using
 babel-preset-env now: please read babeljs.io/env to update!
√ All packages installed (1 packages installed from npm registry, used 44s, spe
ed 1.84kB/s, json 25(80.05kB), tarball 0B)

緣由是Babel 的官網上在2017年9月宣佈 ES2015 / ES2016/ ES2017 等等 ES20xx 時代的 presets 統統被廢棄（deprecated），取而代之的是 babel-preset-env，而且承諾它將成爲「將來不會過期的（future-proof）」解決方案。

在過去，Babel 將  babel-preset-es2015 放在  babel/babel 的主倉庫中進行維護，而 babel-preset-env 則 獨立爲一級項目，這從某種程度上也顯示出 Babel 官方對這款 preset 的重視程度和更長遠的規劃。

如何遷移

首先卸載原來的 preset，而後安裝 babel-preset-env：

npm uninstall --save-dev babel-preset-es2015
npm install --save-dev babel-preset-env@next

接下來將你的 .babelrc 文件中「es2015」修改「env」：

{
  "presets": [ "env" ],
  ...
}

好了，恭喜你，就這麼簡單，你已經能夠與 ES2015+ 保持更新了！

vue-cli腳手架環境中，已經採用了最新的babel-preset-env，因此能夠忽略 "presets": [["es2015", { "modules": false }]]  es2015 這項

 

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
   // ["es2015", { "modules": false }],   //須要先cnpm install babel-preset-es2015 --save-dev ,下載es5的babel轉碼插件，些處是多餘，已配置env
    "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下來，就能夠歡快的實現按需加載啦　　

若是你只但願引入部分組件，好比 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)
});

 

全局配置

在引入 Element 時，能夠傳入一個全局配置對象。該對象目前僅支持 size 字段，用於改變組件的默認尺寸。按照引入 Element 的方式，具體操做以下：

完整引入 Element：

import Vue from 'vue';
import Element from 'element-ui';
Vue.use(Element, { size: 'small' });

按需引入 Element：

import Vue from 'vue';
import { Button } from 'element-ui';

Vue.prototype.$ELEMENT = { size: 'small' };
Vue.use(Button);　

按照以上設置，項目中全部擁有 size 屬性的組件的默認尺寸均爲 'small'。