Web前端-Vue组件库Element_element组件库

黑马程序员JavaWeb开发教程

一、快速入门

（1）什么是Element

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

（2）快速入门

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

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

2. 引入ElementUI组件库

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

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

• 在 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

• App.vue 代码

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

<style></style>
1
2
3
4
5
6
7
8
9
10
11

• 浏览器结果
  

二、常见组件

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

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

2、分页（Pagination）

• 当数据量过多时，使用分页分解数据

3、表单

注意：其实对组件的是用都是直接使用Element官网提供的代码，自己在做调整即可，有不明白的属性等，都可以到网页的最下方，关于组件的属性以及事件都有详细的说明

三、案例

（1）根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载

• Vue项目中使用Axios
  • 在项目目录下安装axios：npm install axios;
  • 需要使用axios时，导入axios：import axios from ‘axios’;