当使用 vue-cli 来初始化项目时，大部分配置它都帮我们做了，但是 ui 框架需要我们自己配置。

以element-ui为例，官网上虽然给出了脚手架下的配置文件，但是当我们打开 vue-cli 初始化后的项目来修改时，发现有些不同，这个时候就会犹豫，要不要删除什么以达到和官网给出的配置一样呢？

---

答案是不用的。
首先，element-ui官网第一个给出要配置的是.babelrc文件，它就给了一段代码，我们通过vue-cli构建项目的话发现.babelrc文件里面已经有内容了，看下面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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

element-ui官网对.babelrc配置就给出了以下代码：

1
2
3

{
  "presets": ["vue-app"]
}

仔细看上面的代码，.babelrc里面有两个presets,该把这段代码放在哪？
我看了下网上大神们的项目，发现他们都是写在第一个presets里面的

接下来就是package.json文件，一个个找，没有的安装，记得–save-dev保存在devDependencies里面，scripts里面的代码不用改

第三个就是webpack.config.js文件夹了

不用改，我们用的是vue-cli搭建的项目，所以它默认分成三个不同的webpack.config.js文件，与element-ui官网的结构已经不一样了

接下来还是.babelrc文件

我们发现它的代码又变成这样了：

1
2
3
4
5
6
7
8
9
10
11

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

不要慌，只要在plugins里面添加相应的配置即可，其他忽视。。。

最后，配好了用

跟着官网来，很简单，在main.js使用import导入element-ui，然后再Vue.use(Button)(Button就是你要导入的组件)

注意，Vue.use(Button)写在new Vue({})前面，确保实例化前将组件注册好！！！