Element-ui环境配置

官方文档： http://element-cn.eleme.io/#/zh-CN/component/installation

一、完整引入

1. 在项目目录下执行：npm i element-ui -S

2. 在main.js中写入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 直接在组件中用

element-ui提供的组件名以el-开头

二、按需引入

我们可以只引入需要的组件，以达到减小项目体积的目的。

1. 安装包

npm i element-ui -S
npm install babel-plugin-component -D

2. 然后，将 .babelrc 修改为：
 注意官方文档此处有坑，以下提供完整配置

 把vue-cli构建的项目默认的：

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

改为：

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] }
    }],
    ["es2015", { "modules": false }], "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "transform-runtime",
    [
      "component", {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3. 在main.js组件中加入：

import { Button, Select } from 'element-ui';
// 官网的例子没有引入样式，但是不引入，就没有样式
import 'element-ui/lib/theme-chalk/index.css' 

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

5. 错误处理

① 如果报错： Module build failed: Error: Couldn't find preset "es2015" relative to directory（遇到了）

    则执行：npm install babel-preset-es2015 --save-dev

② 报错：These dependencies were not found:deepmerge,resize-observer-polyfill ,throttle-debounce/debounce（没遇到）

     则执行：npm install --save deepmerge resize-observer-polyfill throttle-debounce/debounce

③ 按需引入时，Select组件不显示下拉的数据，而完整引入不会遇到这个问题。（遇到了）

    没有引入Option, OptionGroup组件