什么是Element UI
- Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
- Element UI是基于Vue 2.0的
- Element UI 提供一组组件
- Element UI 提供组件的参考实例, 直接复制
- 官方网站:
https://element.eleme.cn/#/zh-CN/component/installation
搭建环境
创建项目
步骤一: 通过 vue-cli创建项目
vue create eui01
步骤二:运行项目
整合1:插件
安装好vue项目后,进入到项目目录,执行命令
vue add element
整合步骤1:确定引入方式(全部引入、按需引入)
整合
整合2:安装element-ui插件
npm i element-ui --save
整合:element-ui引入
- 官方提供了2种引入方式:完整引入、按需引入
- 完整引入:引入了eui所有的组件,学习时/开发时常用
- 按需引入:引入需要的组件,生产环境下使用。
- 完整引入
- 1. 导入 element ui 组件库
- 2. 导入 element ui css样式
- 3. 并将element ui 注册给vue
/* 导入element-ui样式
*/
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
/* element-ui所有组件
*/
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
3.布局容器
布局容器
- 使用element-ui的布局容器(Container) 进行页面布局。对页面进行划分(上、下、左、中)
- 官方文档 : https://element.eleme.cn/#/zh-CN/component/container
用于布局的容器组件,方便快速搭建页面的基本结构:
<el-container>
:外层容器。当子元素中包含 <el-header>
或 <el-footer>
时,全部子元素会垂直上下排列,否则会水平左右排列。
<el-header>
:顶栏容器。
<el-aside>
:侧边栏容器。
<el-main>
:主要区域容器。
<el-footer>
:底栏容器。
以上组件采用了 flex 布局,使用前请确定目标浏览器是否兼容。此外,
<el-container>
的子元素只能是后四者,后四者的父元素也只能是<el-container>
。
步骤一: 修改src/main.js 导入 element-ui 样式和组件
/* 导入element-ui样式
*/
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
/* element-ui所有组件
*/
import ElementUI from 'element-ui'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
步骤二: 删除 src/App.vue所有内容, 拷贝布局模板和样式
<template>
<div id="app">
<el-container>
<el-header>Header</el-header>
<el-main>Main</el-main>
<el-footer>Footer</el-footer>
</el-container>
</div>
</template>
<script>
export default {
}
</script>
<style>
/* 稍后删除 */
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
}
</style>
reset.css
布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式
步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,th,td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style: normal;
font-weight: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-size: 100%;
font-weight: normal;
}
满屏填充
在App.vue中,添加样式
html, body, .el-container {
height: 100%;
}
4.导航条
需求
导航条
使用导航菜单(NavMenu) 完成导航条效果
官方文档 : https://element.eleme.cn/#/zh-CN/component/menu
<template>
<div id="app">
<el-container>
<el-header>
<!-- 导航条 -->
<el-menu
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<el-menu-item index="/">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">学生管理</template>
<el-menu-item index="/studentList">学生列表</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">个人中心</template>
<el-menu-item index="/login">登录</el-menu-item>
<el-menu-item index="/register">注册</el-menu-item>
</el-submenu>
<el-menu-item index="/cart">
购物车
</el-menu-item>
</el-menu>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>
版权所有 2006 - 2022 传智专修学院
</el-footer>
</el-container>
</div>
</template>
<script>
export default {
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
padding: 0;
}
</style>
路由
点击”首页” 和 “购物车” 可以调整页面
步骤一: 修改 src/App.vue 设置路由视图
<template>
<div id="app">
<el-container>
<el-header>
<!-- 导航条 -->
<el-menu
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:router="true"
>
<el-menu-item index="/">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">学生管理</template>
<el-menu-item index="/studentList">学生列表</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title">个人中心</template>
<el-menu-item index="/login">登录</el-menu-item>
<el-menu-item index="/register">注册</el-menu-item>
</el-submenu>
<el-menu-item index="/cart">
购物车
</el-menu-item>
</el-menu>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>
版权所有 2006 - 2020 传智专修学院
</el-footer>
</el-container>
</div>
</template>
<script>
export default {
}
</script>
<style>
.el-header, .el-footer {
background-color: #B3C0D1;
color: #333;
text-align: center;
line-height: 60px;
padding: 0;
}
</style>
步骤二: 编写测试组件(Home.vue和Cart.vue)
页面刷新导航选择问题
默认情况:点击后的默认效果
刷新页面, 导航条的选中状态消失
修复: 修改 App.vue页面
<template>
<div id="app">
<el-container>
<el-header>
<!-- 导航条 -->
<el-menu
:default-active="$route.path"
class="el-menu-demo"
mode="horizontal"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
:router="true"
>
页眉
<el-footer>
版权所有 2006 - 2022 传智专修学院
</el-footer>
5.表格:查询列表
测试页面
基本表格
<template>
<div>
<!-- 列表 -->
<el-table :data="studentList" >
<el-table-column prop="sid" label="编号" width="150"></el-table-column>
<el-table-column prop="sname" label="姓名" width="150"></el-table-column>
<el-table-column prop="gender" label="性别" width="150"></el-table-column>
<el-table-column prop="age" label="年龄" width="150"></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data () {
return {
studentList: [
{
sid: 's001',