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>

阅读更多