Vue中使用Element-UI组件
Element-UI
一个与vue配合的UI框架
官网:https://element.eleme.cn/#/zh-CN
安装
可以命令行安装,也可以UI界面安装
命令行安装
npm i element-ui -S
使用
在入口文件main.js中加入
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //样式表
Vue.use(ElementUI);//使用element-ui
此处示例带状态的
table
组件
vue
<template>
<div class="about">
<h1>Element-UI带状态表格</h1>
<el-table
:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName">
<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>
</div>
</template>
<style>
.el-table .warning-row {
background: oldlace;
}
.el-table .success-row {
background: #f0f9eb;
}
</style>
<script>
export default{
methods:{
tableRowClassName({row, rowIndex}) {
if (rowIndex === 1) {
return 'warning-row';
} else if (rowIndex === 3) {
return 'success-row';
}
return '';
}
},
data(){ //组件的data是函数且须返回一个对象
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
}
}
</script>
效果图
UI界面安装
步骤:
插件----添加插件----搜索vue-cli-plugin-element
配置插件 按需要导入,能减少打包体积
然后会自动生成plugins文件夹并且包含element.js
使用
此处示例测试
button
组件
views/xx.vue
vue文件:
<template>
<div>
<h1>Hello Vue!</h1>
<el-row>
<el-button round>圆角按钮</el-button>
<el-button type="primary" round>主要按钮</el-button>
<el-button type="success" round>成功按钮</el-button>
<el-button type="info" round>信息按钮</el-button>
<el-button type="warning" round>警告按钮</el-button>
<el-button type="danger" round>危险按钮</el-button>
</el-row>
</div>
</template>
element.js需要引入button组件
import Vue from 'vue'
import { Button} from 'element-ui'
Vue.use(Button)
运行项目查看效果:
效果图
vue.config的配置
关闭eslint语法检查,修改端口
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,//关闭eslint用法检查,
devServer:{ //修改端口
port:9090
}
})
简单的使用大功告成~