📒 程序员小王的博客：程序员小王的博客
🎉 欢迎点赞 👍 收藏 ⭐留言 📝
😊 如有编辑错误联系作者，如果有比较好的文章欢迎分享给我，我会取其精华去其糟粕
🍅java自学的学习路线：java自学的学习路线

公司： ElementUI由饿了么团队出品，一套为开发者、设计师和产品经理准备的组件库，可以直接下载使用，能帮我等搬砖人员节省大量的时间。

作用:美化页面，在vue中使用

应学前端创建

vue init webpack vue-yingxue-master

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mUNoGVjo-1640787703104)(image/image.png)]

npm run dev

npm install axois

一、官网

https://element.eleme.cn/

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组件中直接使用

四、项目案例