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'。