vue-cli中使用Element（vue2.0桌面端组件库）

Element官网链接：http://element-cn.eleme.io/#/zh-CN

1、在项目中使用npm安装

npm install element-ui -save

2.1、在项目中完整引入（引入所有element组件）

在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';             //引入element-ui组件
import 'element-ui/lib/theme-chalk/index.css';  //element-ui组件的样式需要单独引入
import App from './App.vue';

Vue.use(ElementUI);  //注册element组件

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

2.2、使用

全局引入之后即可在vue的任意组件中使用element组件了。

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

3.1、按需引入（引入所需的 element组件）

借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

1、首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

2、然后将项目根目录下的 .babelrc 文件的plugins字段修改为：

{
    "plugins": [
    "transform-vue-jsx", 
    "transform-runtime",
    //添加下面这一个数组
    [
    "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

3、在main.js中按需引入

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：（多个组件之间用英文逗号分隔）

import Vue from 'vue';
import { Button, Select } from 'element-ui';  //引入所需的组件，但是不需要再单独引入样式了
import App from './App.vue';

Vue.use(Button) //注册引入的组件
Vue.use(Select)

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

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3.2、使用

然后可以在vue中的任意组件使用已经引入的element组件了，如果没有引入的组件就不可以使用，否则就会报错。

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