vue cli3中按需导入elementUI 配置

目前element官网介绍的按需导入方式，是使用vue cli2的，现在更新到3.0所需的配置稍有不同。具体如下：

element官网介绍地址：https://element.eleme.cn/#/zh-CN/component/quickstart

官网截图

一、在3.0项目中没有.babelrc文件，无需新建.babelrc文件，直接可以在babel.config.js中配置即可，如下：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  plugins: [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

这里需要注意的是官网上设置的"presets" 为 [["es2015", { "modules": false }]],我理解最新的应该为@babel/preset-env插件，所以这块要更改了。而且这个插件是默认装的。
vue cli 中浏览器兼容性有提到这点。https://cli.vuejs.org/zh/guide/browser-compatibility.html#browserslist

官网截图

从package.json依赖里面查不到@babel/preset-env插件，可以沿着@vue/cli-plugin-babel插件查找，里面一级一级就可以找到。

image.png

二、如果找不到@babel/preset-env，可以手动安装一下

npm install @babel/preset-env -D

或者暂时不安装，等把其他步骤都配置好，仍然不行，再安装一下也可以。（我做的时候，没有安装这步，直接将babel.config.js配置好即可。）

三、如果你只希望引入部分组件，比如 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)
});

四、直接在App.vue中测试下,是否可以用button。

<template>
  <div id="app">
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-button type="info">信息按钮</el-button>
    <el-button type="warning">警告按钮</el-button>
    <el-button type="danger">危险按钮</el-button>
  </div>
</template>

五、享受小小成功的喜悦即可。

photo.jpg