Vue入门到关门之第三方框架elementui

1、什么是ElementUI？

Element UI 是一个基于 Vue.js 的组件库，它提供了丰富的 UI 组件和一套完整的解决方案，用于快速构建现代化的 Web 应用程序。Element UI 的目标是帮助开发者快速构建出美观、易用的界面，并提供了丰富的组件，包括但不限于按钮、表单、表格、对话框、菜单、导航、布局等等。

Element UI 的特点包括：

丰富的组件: Element UI 提供了大量的常用 UI 组件，开发者可以通过简单的引入和配置，快速构建出符合现代界面设计的 Web 应用。
易用性: 组件设计符合用户习惯，提供了丰富的交互细节和动画效果，使得开发者可以轻松地构建出用户友好的界面。
响应式设计: Element UI 的组件支持响应式设计，能够适应不同尺寸的屏幕，从而提供良好的移动端和桌面端用户体验。
主题定制: Element UI 提供了灵活的主题定制功能，开发者可以根据自己的需求定制组件的外观和风格。

总的来说，Element UI 是一个功能丰富、易用且灵活的 Vue.js 组件库，为开发者提供了丰富的工具和组件，帮助他们快速构建出现代化的 Web 应用程序。

2、Element UI的官方网站

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

https://element.eleme.cn/#/zh-CN

3、Element UI的使用

（1）安装

在Vue项目中使用ElementUI，需要进行以下配置步骤：

在项目中安装
```
cnpm install element-ui -S
```

（2）项目中配置

在main.js配置：

导入ElementUI对象：
- 使用import ElementUI from 'element-ui'将ElementUI对象引入。
引入ElementUI样式：
- 使用import 'element-ui/lib/theme-chalk/index.css'引入ElementUI的样式。

// 导入ElementUI对象
import ElementUI from 'element-ui';       
// 引入ElementUI样式
import 'element-ui/lib/theme-chalk/index.css';

注册ElementUI组件：
- 在main.js文件中，通过Vue.use(ElementUI)全局注册ElementUI组件，并使其可在所有的Vue组件中使用。
```
Vue.use(ElementUI)
```

这样配置完成后，就可以在项目中直接使用ElementUI提供的组件和样式了。如果在其他组件中看到了喜欢的ElementUI的样式效果，可以直接复制相关的HTML、CSS和JavaScript代码来使用。

（3）使用

示例：

<template><div class="Element"><h1>栅格</h1><el-row :gutter="20"><el-col :span="16"><div class="left"></div></el-col><el-col :span="8"><div class="right"></div></el-col></el-row><el-row :gutter="20"><el-col :span="12" :offset="6"><div class="center"></div></el-col></el-row><h2>布局容器</h2><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container><h1>小图标</h1><span class="el-icon-video-camera">打开摄像机</span><h1>按钮</h1><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" plain>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><h1>链接文字</h1><div><el-link href="https://element.eleme.io" target="_blank">默认链接</el-link><br><el-link type="primary">主要链接</el-link><el-link type="success">成功链接</el-link><el-link type="warning">警告链接</el-link><el-link type="danger">危险链接</el-link><el-link type="info">信息链接</el-link></div><h1>单选</h1><div><el-radio-group v-model="radio1"><el-radio-button :label="item" v-for="item in citys" border="false"></el-radio-button></el-radio-group></div><h1>多选</h1><el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox><div style="margin: 15px 0;"></div><el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange"><el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox></el-checkbox-group><h1>input框</h1><div class="demo-input-suffix">属性方式：<el-inputplaceholder="请选择日期"suffix-icon="el-icon-date"></el-input><el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"></el-input></div><div class="demo-input-suffix">slot 方式：<el-inputplaceholder="请选择日期"><i slot="suffix" class="el-input__icon el-icon-date"></i></el-input><el-inputplaceholder="请输入内容"><i slot="prefix" class="el-input__icon el-icon-search"></i></el-input></div><h1>表格</h1><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table><h1>message提示</h1><el-button :plain="true" @click="open4">错误</el-button><h1>警告</h1><el-button :plain="true" @click="open">错误</el-button></div>
</template>
<script>
const cityOptions = ['上海', '北京', '广州', '深圳'];
export default {name: 'Element',data(){return {// citys:['上海','北京','天剑'],// radio1:'上海',checkAll: false,checkedCities: ['上海', '北京'],cities: cityOptions,isIndeterminate: true,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 弄'}]}},methods:{handleCheckAllChange(val) {this.checkedCities = val ? cityOptions : [];this.isIndeterminate = false;},handleCheckedCitiesChange(value) {let checkedCount = value.length;this.checkAll = checkedCount === this.cities.length;this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;},tableRowClassName({row, rowIndex}) {if (rowIndex === 1) {return 'warning-row';} else if (rowIndex === 3) {return 'success-row';}return '';},open4(){this.$message({message: '恭喜你，这是一条成功消息',type: 'success'});},open() {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$message({type: 'success',message: '删除成功!'});}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}}}
</script><style scoped>
.left{background-color: aqua;height: 200px;
}
.right{background-color: pink;height: 200px;
}
.center{background-color: green;height: 200px;
}.el-header{height: 50px;background-color: rebeccapurple;
}
.el-aside{height: 700px;background-color: aquamarine;
}
.el-main{height: 500px;background-color: #67C23A;
}
.el-footer{height: 200px;background-color: blue;
}
.el-table .warning-row {background: oldlace;
}.el-table .success-row {background: #f0f9eb;
}
</style>

4、总结

(1) 安装：cnpm i element-ui -S
(2) 集成到项目：main.js 中加入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 使用插件
(3) 去官网，找样式，复制，粘贴