Web前端-Vue组件库Element

黑马程序员JavaWeb开发教程

文章目录

一、快速入门
- （1）什么是Element
- - （2）快速入门
二、常见组件
- 1、表格
- 2、分页（Pagination）
- 3、表单
三、案例
- - （1）根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载

一、快速入门

（1）什么是Element

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理之魂被的基于Vue2.0的桌面端组件库
组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等
官网：https://element.eleme.cn/#/zh-CNListener

（2）快速入门

安装ElementUI组件库（在当前工程的目录下），在命令行执行命令npm install element-ui@2.15.3

ctrl+c 终止当前程序
点击导航栏上的查看 -> 终端，在终端中输入上边的命令，默认安装位置是node_modules目录下【注：如果在VSCode终端下载没有再node_modules目录下出现的话，那就使用win+r 输入cmd 打开命令行进行下载】

引入ElementUI组件库

在main.js的适当位置加入以下三行

访问官网，复制组件代码，调整

在 views 目录下新建一个目录 element 存放element的以下组件，并在element 目录下新建 ElemView.vue【采用驼峰命名，否则可能会报错】
在观望中复制代码下来，粘贴到对应的文件中，即 ElemView.vue，之后修改App.vue 文件中的内容，使页面能够显示 ElemView.vue 中的样式
ElemView.vue 代码

// 编写htm的代码，是模板部分
<template>
  <div>
    <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>
  </div>
</template>

// 定义vue当中的数据模型和方法
<script>
export default {};
</script>

// 定义CSS的样式
<style></style>

App.vue 代码

<template>
  <element-view></element-view>
</template>
<script>
import ElementView from './views/element/ElementView.vue'
export default {
  components: { ElementView },
}
</script>

<style></style>

浏览器结果

二、常见组件

其实这里的组件使用，就是到官网去找到自己想使用的组件，将代码复制过来即可

1、表格

ElementView.vue 中的代码

<!-- HTML代码 -->
<template>
    <!-- <h1>{{ message }}</h1> -->
    <div>
        <!-- 按钮组件 -->
        <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>
        <br>
        <!-- 表格组件 -->
        <el-table :data="tableData" border 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>
        <br>
    </div>

</template>

<!-- vue数据 -->
<script>
export default {
    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 弄'
            }]
        }
    },
    methods: {

    }

}
</script>

<!-- CSS样式 -->
<style></style>

在这里插入图片描述