公司： ElementUI由饿了么团队出品，一套为开发者、设计师和产品经理准备的组件库，可以直接下载使用，能帮我等搬砖人员节省大量的时间。
作用:美化页面，在vue中使用
应学前端创建
vue init webpack vue-yingxue-master
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mUNoGVjo-1640787703104)(image/image.png)]
npm run dev
npm install axois
一、官网
Element+ 甚至提供开发人员在构建 UI 界面时可能需要的最细微的部件，从简单的动画到框架范围的国际化系统，可以与 i18n 配对使用以创建自定义翻译，甚至添加非内置语言。
Element+ 在 GitHub 上拥有 11.1k+ 颗星，正在成为 Github 上最受欢迎的 Vue3 UI 框架之一，它以出色的问题管理、及时更新、可插入组件和通过SCSS变量的高定制性达到了开发者的期望。
二、简介
Element，一套为开发者、设计师和产品经理准备的基于Vue 2.0 的桌面端组件库
1、按钮
使用type（背景）、plain(没有背景)、round(圆角)和circle(正圆)属性来定义 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> <el-row> <el-button plain>朴素按钮</el-button> <el-button type="primary" plain>主要按钮</el-button> <el-button type="success" plain>成功按钮</el-button> <el-button type="info" plain>信息按钮</el-button> <el-button type="warning" plain>警告按钮</el-button> <el-button type="danger" plain>危险按钮</el-button> </el-row> <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> <el-row> <el-button icon="el-icon-search" circle></el-button> <el-button type="primary" icon="el-icon-edit" circle></el-button> <el-button type="success" icon="el-icon-check" circle></el-button> <el-button type="info" icon="el-icon-message" circle></el-button> <el-button type="warning" icon="el-icon-star-off" circle></el-button> <el-button type="danger" icon="el-icon-delete" circle></el-button> </el-row>
2、提示消息
el-button :plain="true" @click="open">打开消息提示</el-button> open() { this.$message('这是一条消息提示'); }
<el-button :plain="true" @click="open2">成功</el-button> open2() { this.$message({ message: '恭喜你，这是一条成功消息', type: 'success' }); }
4、走马灯(轮播图)
<el-carousel :interval="4000" type="card" height="300px"> <el-carousel-item v-for="item in imgs" :key="item"> <el-image :src="item"></el-image> </el-carousel-item> </el-carousel> import pic1 from '../assets/1.jpeg'; import pic2 from '../assets/2.jpeg'; import pic3 from '../assets/3.jpeg'; import pic4 from '../assets/4.jpeg'; data(){ return{ imgs:[pic1,pic2,pic3,pic4] } }
5、导航栏
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">主页</el-menu-item> <el-menu-item index="2">用户管理</el-menu-item> <el-menu-item index="3">列别管理</el-menu-item> </el-menu> data() { return { activeIndex: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { // console.log(key, keyPath); // console.log(key); if( key == 1){ // 展示首页的组件 }else if( key == 2){ //展示用户的组件 } } }
6、表格
<el-table :data="tableData" 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-column label="操作"> <el-button type="primary">删除</el-button> </el-table-column> </el-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 弄' }] }; },
7、消息提示
<el-button :plain="true" @click="open2">成功</el-button> methods: { open1() { this.$message({ message:"弹出内容", type:"success" }); } }
三、安装使用
a． 安装
进入到到项目的根目录
cd vue-yingxue-master
执行安装命令
npm i element-ui -S
b． 引入
在vue应用的根目录/src/main.js中引入
import Element from 'element-ui' ; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element)
c． 在vue组件中直接使用
四、项目案例
