饿了么推出了基于 Vue2.0 的组件库,它的名称叫做 element-ui,提供了丰富的 PC 端组件。
ElementUI 官网:http://element-cn.eleme.io/#/zh-CN。
element-ui 组件库有以下四大优势:
丰富的 feature:丰富的组件,自定义主题,国际化。
文档 & demo:提供友好的文档和 demo,维护成本小,支持多语言
安装 & 引入:支持 npm 方式和 cdn 方式,并支持按需引入。
工程化:开发,测试,构建,部署,持续集成。
Vue 项目中引入 Element-ui 组件库有两种方式:
1. CDN:在线方式直接在页面上引入 Element-ui 的 JS 和 CSS 文件,代码如下:
<!-- 引入样式 -->
<link rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. npm 安element-ui
npm install element-ui -S
Vue 项目中集成 Element-ui 的步骤:
(1) 在控制台输入命令进行安装
(2) 查看配置文件 package.json,是否有 element-ui 组件的版本号
(3) 在 main.js 文件中完整引入 Element-ui 组件库
<template>
<div id="app">
<h1>{{msg}}</h1>
<!--1.常用按钮-->
<el-button type="primary">主要按钮</el-button>
<el-button plain type="warning">警告按钮</el-button>
<!--2.下拉列表-->
<el-dropdown split-button size="small" trigger="click">
个人中心
<el-dropdown-menu>
<el-dropdown-item >退出系统</el-dropdown-item>
<el-dropdown-item divided>修改密码</el-dropdown-item>
<el-dropdown-item divided>联系管理员</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<br>
<!--3.Table 表格-->
<el-table :data="tableData" stripe>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column label="操作" align="center">
<!--
slot-scope:作用域插槽,可以获取表格数据
scope:代表表格数据,可以通过scope.row来获取表格当前行数据,scope不是固定写法
-->
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
<el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
//在Vue组件中data只能为函数,这是Vue的特性。必须有return返回数据,否则页面模板接收不到值。
data () {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}]
}
},
methods:{
handleUpdate(row){
alert(row.date);
},
handleDelete(row){
alert(row.date);
}
}
}
</script>
<style scoped>
</style>
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')