element是国内饿了么公司提供的一套开源前端框架,简介优雅,提供了vue、react、angular等多个版本。官方推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。引入步骤如下:
1.在项目目录里输入如下指令
npm i element-ui -S
i表示install按照
-S表示在package.json中做安装记录
指令执行完成后,可以看到element-ui代码已经下载到node_modules文件夹中,同时package.json中已做依赖
2.引入 Element
在 main.js 中写入以下内容:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
最后就可以在vue组件中使用element-ui控件了
<template>
<div>
<el-table
:data="tableData"
stripe
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</div>
</template>
<script>
export default {
name: 'Table',
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
value: true
}
}
}
</script>
效果如下: