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>

在这里插入图片描述