前提条件是要安装好npm和cnpm,并创建好vue项目。
第一步:安装element-ui
①通过cmd窗口,cd到项目的路径下。如果有安装git,也可以直接到该项目的路径下,右键》Git Bash Here,如下图:
②在打开的窗口中输入:
cnpm install -S element-ui
等待......,成功后如下图:
③使用babel-plugin-component来实现element-ui模块按需加载:
cnpm install babel-plugin-component -D
等待......,成功后如下图:
然后,在 .babelrc的plugins中添加element-ui组件配置:
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
使用:
经过以上配置之后,我们就可以按照自己需求来引用element-ui的组件了(具体配置项选项请参考element-ui官方文档:http://element-cn.eleme.io/#/zh-CN/component/quickstart)
这里使用几个模块作为示例:
1. 在main.js引用需要的模块(你也可以在你需要的组件内部引用)
//按需引用element-ui组件
import {Row,Col,Button,Notification,Message} from 'element-ui'
//将element组件内容挂载到Vue上
Vue.use(Row);
Vue.use(Col);
Vue.use(Button);
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
2、 在APP.vue中使用引用的模块(可以在APP.vue以及内部其他组件使用)
<!-- 使用col和button组件 -->
<el-row>
<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>
</el-row>
mounted(){
//使用Message组件
this.$message({
type:'success',
message:'element-ui安装成功'
});
//使用Message组件
this.$notify({
title: '成功',
message: 'element-ui安装成功',
type: 'success'
});
}
3、这样,把项目跑起来($ npm run dev)后,浏览器打开localhost:8080,看到如下画面,logo下的button组件,提示和通知的Message、Notification组件,说明配置成功了
参考:使用webpack搭建简单的vue+element-ui项目,并实现模块按需加载