1. Element UI

1.1 什么是Element UI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
- Element UI是基于Vue 2.0的
- Element UI 提供一组组件
- Element UI 提供组件的参考实例, 直接复制

官网：https://element.eleme.cn/#/zh-CN/component/installation

1.2 搭建环境

1.2.1 创建vue项目

步骤一: 通过 vue-cli创建项目

vue create eui01

步骤二: 手动选择功能(Manually select features)

步骤三: 选择需要的组件
- Babel : JavaScript编译器, 用于版本兼容, 复制将 ES6+ 转换成 ES 5.
- Router : 路由
- Vuex : 组件数据共享
步骤四: 使用各个组件的配置,已独立文件的方式存在.

步骤五:是否保存当前配置

步骤六: 安装完成, 进入项目,并启动项目测试

1.2.2 安装 element-ui组件

第一步：npm i element-ui

第二步：在main.js中引入element-UI

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)new Vue({router,store,render: h => h(App)
}).$mount('#app')

1.3 综合案例: 主体架构

1.3.1 需求

1.3.2 布局

使用element-ui的布局容器(Container) 进行页面布局

官方文档 : https://element.eleme.cn/#/zh-CN/component/container

步骤一: 修改src/main.js 导入 element-ui 样式和组件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI)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><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}
</style>

1.3.3 reset.css

布局页面完成后, 整个body会存在一圈空白, 开发中一般选择重新设置页面样式

步骤一: 百度搜索”reset.css” , 并创建 assets/app.css ,拷贝样式 (复制下面样式即可)

/*
KISSY CSS Reset
理念：清除和重置是紧密不可分的
特色：1.适应中文 2.基于最新主流浏览器
维护：玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*//* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */margin: 0;padding: 0;
}/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie *//*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
}h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 *//* 重置列表元素 */
ul, ol { list-style: none; }/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */border-bottom: 1px dotted;cursor: help;
}q:before, q:after { content: ''; }/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
/* 注：optgroup 无法扶正 */
button, input, select, textarea {font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}/* 重置表格元素 */
table {border-collapse: collapse;border-spacing: 0;
}/* 重置 hr */
hr {border: none;height: 1px;
}/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

步骤二: 修改 src/main.js 导入 app.css 样式

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
/*** 导入公共样式*/
import "@/assets/app.css"Vue.config.productionTip = false
Vue.use(ElementUI)new Vue({router,store,render: h => h(App)
}).$mount('#app')

1.3.4 导航条

使用导航菜单(NavMenu) 完成导航条效果

官方文档 : https://element.eleme.cn/#/zh-CN/component/menu

1、首页

2、个人中心

A. 账号设置

B. 意见反馈

C. 退出

3、消息中心

4、购物车

步骤1: 修改 src/App.vue

<template><div id="app"><el-container><el-header><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">首页</el-menu-item><el-submenu index="2"><template slot="title">个人中心</template><el-menu-item index="2-1">账号设置</el-menu-item><el-menu-item index="2-2">意见反馈</el-menu-item><el-menu-item index="2-3">退出</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">购物车</a></el-menu-item></el-menu></el-header><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></div>
</template><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}</style>

1.3.5 页眉

设置页眉

修改 src/App.vue页面 , 添加footer数据和样式 , 删除临时样式.

<template><div id="app"><el-container><el-header><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">首页</el-menu-item><el-submenu index="2"><template slot="title">个人中心</template><el-menu-item index="2-1">账号设置</el-menu-item><el-menu-item index="2-2">意见反馈</el-menu-item><el-menu-item index="2-3">退出</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">购物车</a></el-menu-item></el-menu></el-header><el-main>Main</el-main><el-footer>版权所有 2006 - 2019 传智专修学院</el-footer></el-container></div>
</template><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}</style>

1.3.6 路由

点击”首页” 和 “购物车” 可以调整页面

步骤一: 修改 src/App.vue 设置路由视图

<template><div id="app"><el-container><el-header><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b":router="true"><el-menu-item index="1">首页</el-menu-item><el-submenu index="2"><template slot="title">个人中心</template><el-menu-item index="2-1">账号设置</el-menu-item><el-menu-item index="2-2">意见反馈</el-menu-item><el-menu-item index="2-3">退出</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="/cart"><a href="https://www.ele.me" target="_blank">购物车</a></el-menu-item></el-menu></el-header><el-main><router-view></router-view></el-main><el-footer>版权所有 2006 - 2019 传智专修学院</el-footer></el-container></div>
</template><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}</style>

步骤二: 修改 src/router.js 进行路由设置, Home组件不变, 修改购物车cart组件

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: () => import('../views/About.vue')},{path: '/cart',name: 'cart',component: () => import('../views/Cart.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

l 步骤三: 修改 src/views/Home.vue 页面, 删除之前内容, 编写基本模板

<template><div>首页</div>
</template><script>export default {
}
</script>

l 步骤四: 创建 src/views/Cart.vue组件, 编写基本模板

<template><div>购物车</div>
</template><script>
export default {}
</script><style></style>

1.3.7 页面刷新导航选中问题

l 默认情况

l 刷新页面, 导航条的选中状态改变了

l 修复: 修改 App.vue页面

<template><div id="app"><el-container><el-header><el-menu:default-active="$route.path"class="el-menu-demo"mode="horizontal"@select="handleSelect"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="2-1">账号设置</el-menu-item><el-menu-item index="2-2">意见反馈</el-menu-item><el-menu-item index="2-3">退出</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="/cart">购物车</el-menu-item></el-menu></el-header><el-main><router-view></router-view></el-main><el-footer>版权所有 2006 - 2019 传智专修学院</el-footer></el-container></div>
</template><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}</style>

1.3.8 标记

l 用户如果添加了对应的课程,需要在”购物车”导航按钮上显示标记

l 官方文档: https://element.eleme.cn/#/zh-CN/component/badge

l 修改 src/App.vue页面,并添加定位样式

<template><div id="app"><el-container><el-header><el-menu:default-active="$route.path"class="el-menu-demo"mode="horizontal"@select="handleSelect"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="2-1">账号设置</el-menu-item><el-menu-item index="2-2">意见反馈</el-menu-item><el-menu-item index="2-3">退出</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="/cart">购物车<el-badge :value="100" :max="10" class="item"></el-badge></el-menu-item></el-menu></el-header><el-main><router-view></router-view></el-main><el-footer>版权所有 2006 - 2019 传智专修学院</el-footer></el-container></div>
</template><style>.el-header, .el-footer {background-color: #B3C0D1;color: #333;text-align: center;line-height: 60px;}</style>

1.4 综合案例: 首页

1.4.1 需求

1.4.2 轮播图

l 使用走马灯(Carousel) 实现轮播图效果

l 官方文档: https://element.eleme.cn/#/zh-CN/component/carousel

l 修改 src/views/Home.vue ,编写轮播图效果

<template><div>首页<el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in 6" :key="item"><img src="@/assets/logo.png" alt=""></el-carousel-item></el-carousel></div>
</template><script>export default {
}
</script>
<style scoped>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}
</style>

1.4.3 课程列表之布局

l 使用布局”Layout” 可以非常友好的规划页面的结构

用于设置行

gutter属性:用于设置列间距

用于列

span属性: 用于设置列宽, 最大值24 . element将一行拆分成24个单元.

l 官方文档: https://element.eleme.cn/#/zh-CN/component/layout

l 修改 src/views/Home.vue页面

<template><div>首页<el-carousel :interval="4000" type="card" height="200px"><el-carousel-item v-for="item in 6" :key="item"><img src="@/assets/logo.png" alt=""></el-carousel-item></el-carousel><!-- 课程列表 --><div class="course" v-for="(o,c) in 3" :key="c"><h2>前端开发</h2><el-row :gutter="10"><el-col :span="8"><div style="background-color:#999;height:100px;">测试数据</div></el-col><el-col :span="8"><div style="background-color:#999;height:100px;">测试数据</div></el-col><el-col :span="8"><div style="background-color:#999;height:100px;">测试数据</div></el-col></el-row></div></div>
</template><script>export default {
}
</script>
<style scoped>.el-carousel__item h3 {color: #475669;font-size: 14px;opacity: 0.75;line-height: 200px;margin: 0;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}/* 课程列表样式 */.course h2 {text-align: center;font-weight: bold;font-size: 25px;padding-top: 30px;padding-bottom: 15px;}
</style>

1.4.4 课程列表之详情(卡片)

l 步骤一: 拷贝图片

l 步骤二: 使用卡片容器划分课程区域

n 官方文档: https://element.eleme.cn/#/zh-CN/component/card

<template><div id="home"><!-- 轮播图 --><el-carousel :interval="4000" type="card" height="350px"><el-carousel-item v-for="item in 6" :key="item"><img src="@/assets/logo.png" alt=""></el-carousel-item></el-carousel><!-- 课程列表 --><div class="course" v-for="(o,c) in 3" :key="c"><h2>前端开发</h2><el-row :gutter="10"><el-col v-for="(e,i) in 6" :key="i" :span="8"><el-card><img src="@/assets/course.jpg" class="image"></el-card></el-col></el-row></div></div>
</template><script>
export default {}
</script><style>/* 轮播图样式, 奇偶背景色不同 */.el-carousel__item img {width: 100%;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}/* 课程列表样式 */.course h2 {text-align: center;font-weight: bold;font-size: 25px;padding-top: 30px;padding-bottom: 15px;}.el-card img{width : 100%;}
</style>

l 步骤二: 使用处理超链接

n 官方文档: https://element.eleme.cn/#/zh-CN/component/link

<template><div id="home"><!-- 轮播图 --><el-carousel :interval="4000" type="card" height="350px"><el-carousel-item v-for="item in 6" :key="item"><img src="@/assets/logo.png" alt=""></el-carousel-item></el-carousel><!-- 课程列表 --><div class="course" v-for="(o,c) in 3" :key="c"><h2>前端开发</h2><el-row :gutter="10"><el-col v-for="(e,i) in 6" :key="i" :span="8"><el-card><img src="@/assets/course.jpg" class="image"><div style="padding: 14px;"><el-link :underline="false" href="/course">Vue全家桶</el-link></div></el-card></el-col></el-row></div></div>
</template><script>
export default {}
</script><style>/* 轮播图样式, 奇偶背景色不同 */.el-carousel__item img {width: 100%;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}/* 课程列表样式 */.course h2 {text-align: center;font-weight: bold;font-size: 25px;padding-top: 30px;padding-bottom: 15px;}.el-card img{width : 100%;}.el-link.el-link--default:hover{color: #F56C6C;font-weight: bold;}</style>

l 步骤四: 使用处理按钮, 使用 el-icon-user 样式显示小图标

按钮官方文档: https://element.eleme.cn/#/zh-CN/component/button

小图标icon官方文档: https://element.eleme.cn/#/zh-CN/component/icon

<template><div id="home"><!-- 轮播图 --><el-carousel :interval="4000" type="card" height="350px"><el-carousel-item v-for="item in 6" :key="item"><img src="@/assets/logo.png" alt=""></el-carousel-item></el-carousel><!-- 课程列表 --><div class="course" v-for="(o,c) in 3" :key="c"><h2>前端开发</h2><el-row :gutter="10"><el-col v-for="(e,i) in 6" :key="i" :span="8"><el-card><img src="@/assets/course.jpg" class="image"><div style="padding: 14px;"><el-link :underline="false" href="/course">Vue全家桶</el-link><div><el-button type="text">初级</el-button><el-button type="text" icon="el-icon-user">46</el-button></div><div><span class="price">￥199</span><span class="real-price">￥299</span><el-button type="danger" round size="mini" class="limit" >限时优惠</el-button></div></div></el-card></el-col></el-row></div></div>
</template><script>
export default {}
</script><style>/* 轮播图样式, 奇偶背景色不同 */.el-carousel__item img {width: 100%;}.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}/* 课程列表样式 */.course h2 {text-align: center;font-weight: bold;font-size: 25px;padding-top: 30px;padding-bottom: 15px;}.el-card img{width : 100%;}.el-link.el-link--default:hover{color: #F56C6C;font-weight: bold;}.course .price{font-size: 16px;color: #4D555D;font-weight: bold;color: #F56C6C;}.course .real-price{font-size: 14px;margin-left: 5px;color: #4D555D;text-decoration: line-through;}.course .limit{float: right;}
</style>

1.5 综合案例: 课程详情页

1.5.1 需求

1.5.2 显示详情页面

步骤一: 创建 src/views/Course.vue组件,编写基本模板

<template><div>详情页</div>
</template><script>
export default {}
</script><style></style>

步骤二: 修改 src/router.js 路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [{path: '/',name: 'home',component: Home},{path: '/about',name: 'about',component: () => import('../views/About.vue')},{path: '/cart',name: 'cart',component: () => import('../views/Cart.vue')},{path: '/course',name: 'course',component: () => import('../views/Course.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router

1.5.3 分类导航

使用面包屑(Breadcrumb)可以完成分类导航

官方文档: https://element.eleme.cn/#/zh-CN/component/breadcrumb

修改 src/views/Course.vue组件

<template><div id="course"><!-- 面包屑,分类条 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/web' }">网页前端</el-breadcrumb-item><el-breadcrumb-item>Vue全家桶</el-breadcrumb-item></el-breadcrumb></div>
</template><script>
export default {}
</script><style>/* 面包屑样式 */.el-breadcrumb {padding-bottom: 20px;}
</style>

1.5.4 课程详情

通过评分完成”五星好评”功能

官方文档: https://element.eleme.cn/#/zh-CN/component/rate

<template><div id="course"><!-- 面包屑,分类条 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/web' }">网页前端</el-breadcrumb-item><el-breadcrumb-item>Vue全家桶</el-breadcrumb-item></el-breadcrumb><!-- 详情 start --><el-row class="detail" :gutter="20"><el-col :span="14"><img src="@/assets/course.jpg" alt=""></el-col><el-col :span="10"><el-card class="box-card"><!-- 标题 --><div class="title">Vue全家桶</div><!-- 评分 --><div class="star"><el-rate:value="3.5"disabledshow-scoretext-color="#ff9900"score-template="3.5"></el-rate></div><!-- 标签 --><div><el-button type="primary" plain size="mini">高级</el-button><el-button type="primary" plain size="mini">前端</el-button><el-button type="primary" plain size="mini">Vue</el-button></div><!-- 价格 --><div class="price">￥ 998.12 元</div><!-- 按钮 --><div class="button"><el-button type="danger" size="medium">加入购物车</el-button><el-button type="danger" size="medium">立即购买</el-button></div></el-card></el-col></el-row><!-- 详情 end --></div>
</template><script>
export default {}
</script><style scoped>/* 面包屑样式 */.el-breadcrumb {padding-bottom: 20px;}/* 详情样式 */.detail img {width: 100%;}.detail .title{font-weight: bold;font-size: 20px;}.detail .star{padding: 10px 0;}.detail .price{padding: 10px 0;color: #F56C6C;}
</style>

1.5.5 课程详情明细

l 课程详情明细需要通过标签页(Tabs)来完成

l 官方文档: https://element.eleme.cn/#/zh-CN/component/tabs

<template><div id="course"><!-- 面包屑,分类条 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/web' }">网页前端</el-breadcrumb-item><el-breadcrumb-item>Vue全家桶</el-breadcrumb-item></el-breadcrumb><!-- 详情 start --><el-row class="detail" :gutter="20"><el-col :span="14"><img src="@/assets/course.jpg" alt=""></el-col><el-col :span="10"><el-card class="box-card"><!-- 标题 --><div class="title">Vue全家桶</div><!-- 评分 --><div class="star"><el-rate:value="3.5"disabledshow-scoretext-color="#ff9900"score-template="3.5"></el-rate></div><!-- 标签 --><div><el-button type="primary" plain size="mini">高级</el-button><el-button type="primary" plain size="mini">前端</el-button><el-button type="primary" plain size="mini">Vue</el-button></div><!-- 价格 --><div class="price">￥ 998.12 元</div><!-- 按钮 --><div class="button"><el-button type="danger" size="medium">加入购物车</el-button><el-button type="danger" size="medium">立即购买</el-button></div></el-card></el-col></el-row><!-- 详情 end --><!-- 详情明细 start --><el-tabs value="first"><el-tab-pane label="课程介绍" name="first"><span slot="label"><i class="el-icon-date"></i> 课程介绍</span>介绍内容</el-tab-pane><el-tab-pane label="章节" name="second">章节内容</el-tab-pane><el-tab-pane label="用户评论" name="third">评论内容</el-tab-pane></el-tabs><!-- 详情明细 end --></div>
</template><script>
export default {}
</script><style scoped>/* 面包屑样式 */.el-breadcrumb {padding-bottom: 20px;}/* 详情样式 */.detail img {width: 100%;}.detail .title{font-weight: bold;font-size: 20px;}.detail .star{padding: 10px 0;}.detail .price{padding: 10px 0;color: #F56C6C;}
</style>

<template><div id="course">
    <!-- 面包屑,分类条 -->    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/web' }">网页前端</el-breadcrumb-item>
        <el-breadcrumb-item>Vue全家桶</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 详情 start -->
    <el-row class="detail" :gutter="20">
      <el-col :span="14"><img src="@/assets/course.jpg" alt="">
      </el-col>
      <el-col :span="10">
        <el-card class="box-card">
          <!-- 标题 --><div class="title">Vue全家桶</div>
          <!-- 评分 --><div class="star">
            <el-rate
              :value="3.5"
              disabled
              show-score
              text-color="#ff9900"
              score-template="3.5">
            </el-rate>
          </div>
          <!-- 标签 --><div>
            <el-button type="primary" plain size="mini">高级</el-button>
            <el-button type="primary" plain size="mini">前端</el-button>
            <el-button type="primary" plain size="mini">Vue</el-button>
          </div>
          <!-- 价格 --><div class="price">
            ￥ 998.12 元
          </div>
          <!-- 按钮 --><div class="button">
            <el-button type="danger" size="medium">加入购物车</el-button>
            <el-button type="danger" size="medium">立即购买</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 详情 end -->
    <!-- 详情明细 start -->
    <el-tabs value="first">
      <el-tab-pane label="课程介绍" name="first">
        <span slot="label"><i class="el-icon-date"></i> 课程介绍</span>
        介绍内容
      </el-tab-pane>
      <el-tab-pane label="章节" name="second">章节内容</el-tab-pane>
      <el-tab-pane label="用户评论" name="third">评论内容</el-tab-pane>
    </el-tabs>
    <!-- 详情明细 end --></div>
</template><script>
export default {}
</script>
<style scoped>/* 面包屑样式 */.el-breadcrumb {    padding-bottom: 20px;}/* 详情样式 */.detail img {    width: 100%;}.detail .title{    font-weight: bold;    font-size: 20px;}.detail .star{    padding: 10px 0;}.detail .price{    padding: 10px 0;    color: #F56C6C;}</style>

1.5.6 课程详情明细之课程介绍

<template><div id="course"><!-- 面包屑,分类条 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/web' }">网页前端</el-breadcrumb-item><el-breadcrumb-item>Vue全家桶</el-breadcrumb-item></el-breadcrumb><!-- 详情 start --><el-row class="detail" :gutter="20"><el-col :span="14"><img src="@/assets/course.jpg" alt=""></el-col><el-col :span="10"><el-card class="box-card"><!-- 标题 --><div class="title">Vue全家桶</div><!-- 评分 --><div class="star"><el-rate:value="3.5"disabledshow-scoretext-color="#ff9900"score-template="3.5"></el-rate></div><!-- 标签 --><div><el-button type="primary" plain size="mini">高级</el-button><el-button type="primary" plain size="mini">前端</el-button><el-button type="primary" plain size="mini">Vue</el-button></div><!-- 价格 --><div class="price">￥ 998.12 元</div><!-- 按钮 --><div class="button"><el-button type="danger" size="medium">加入购物车</el-button><el-button type="danger" size="medium">立即购买</el-button></div></el-card></el-col></el-row><!-- 详情 end --><!-- 详情明细 start --><el-tabs value="first"><el-tab-pane label="课程介绍" name="first"><span slot="label"><i class="el-icon-date"></i> 课程介绍</span><!-- 课程介绍: 图片填充 --><img v-for="(o,i) in 6" :key="i" src="@/assets/course.jpg" alt=""></el-tab-pane><el-tab-pane label="章节" name="second">章节内容</el-tab-pane><el-tab-pane label="用户评论" name="third">评论内容</el-tab-pane></el-tabs><!-- 详情明细 end --></div>
</template><script>
export default {}
</script><style scoped>/* 面包屑样式 */.el-breadcrumb {padding-bottom: 20px;}/* 详情样式 */.detail img {width: 100%;}.detail .title{font-weight: bold;font-size: 20px;}.detail .star{padding: 10px 0;}.detail .price{padding: 10px 0;color: #F56C6C;}/* 详情明细样式 */.el-tabs img {width: 100%;}
</style>

1.5.7 课程详情明细之章节

l 使用折叠面板” Collapse” 处理章节显示

n 官方文档: https://element.eleme.cn/#/zh-CN/component/collapse

<template><div id="course"><!-- 面包屑,分类条 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/web' }">网页前端</el-breadcrumb-item><el-breadcrumb-item>Vue全家桶</el-breadcrumb-item></el-breadcrumb><!-- 详情 start --><el-row class="detail" :gutter="20"><el-col :span="14"><img src="@/assets/course.jpg" alt=""></el-col><el-col :span="10"><el-card class="box-card"><!-- 标题 --><div class="title">Vue全家桶</div><!-- 评分 --><div class="star"><el-rate:value="3.5"disabledshow-scoretext-color="#ff9900"score-template="3.5"></el-rate></div><!-- 标签 --><div><el-button type="primary" plain size="mini">高级</el-button><el-button type="primary" plain size="mini">前端</el-button><el-button type="primary" plain size="mini">Vue</el-button></div><!-- 价格 --><div class="price">￥ 998.12 元</div><!-- 按钮 --><div class="button"><el-button type="danger" size="medium">加入购物车</el-button><el-button type="danger" size="medium">立即购买</el-button></div></el-card></el-col></el-row><!-- 详情 end --><!-- 详情明细 start --><el-tabs value="second"><el-tab-pane label="课程介绍" name="first"><span slot="label"><i class="el-icon-date"></i> 课程介绍</span><!-- 课程介绍: 图片填充 --><img v-for="(o,i) in 6" :key="i" src="@/assets/course.jpg" alt=""></el-tab-pane><el-tab-pane label="章节" name="second"><!-- 章节内容 start 提供数组,展开所有折叠层 --><el-collapse :value="['1','2','3']"><el-collapse-item title="第1章 Vue基础语法" name="1"><template slot="title"><i class="el-icon-menu"></i>第1章 Vue基础语法</template><div><i class="el-icon-video-play"></i>1-1 创建第一个Vue实例</div><div><i class="el-icon-video-play"></i>1-2 挂载点，模版与实例</div><div><i class="el-icon-video-play"></i>1-3 Vue实例中的数据,事件和方法</div><div><i class="el-icon-video-play"></i>1-4 Vue中的属性绑定和双向数据绑定</div><div><i class="el-icon-video-play"></i>1-5 Vue中的计算属性和侦听器</div><div><i class="el-icon-video-play"></i>1-6 v-if, v-show与v-for指令</div></el-collapse-item><el-collapse-item title="第2章 Vue中的组件" name="2"><template slot="title"><i class="el-icon-menu"></i>第2章 Vue中的组件</template><div><i class="el-icon-video-play"></i>2-1 todolist功能开发</div><div><i class="el-icon-video-play"></i>2-2 todolist组件拆分</div><div><i class="el-icon-video-play"></i>2-3 组件与实例的关系</div><div><i class="el-icon-video-play"></i>2-4 实现todolist的删除功能</div></el-collapse-item><el-collapse-item title="第3章 Vue-cli的使用" name="3"><template slot="title"><i class="el-icon-menu"></i>第3章 Vue-cli的使用</template><div><i class="el-icon-video-play"></i>3-1 vue-cli的简介与使用</div><div><i class="el-icon-video-play"></i>3-2 使用vue-cli开发TodoList</div><div><i class="el-icon-video-play"></i>3-3 全局样式与局部样式</div><div><i class="el-icon-video-play"></i>3-4 课程总结</div></el-collapse-item></el-collapse><!-- 章节内容 end --></el-tab-pane><el-tab-pane label="用户评论" name="third">评论内容</el-tab-pane></el-tabs><!-- 详情明细 end --></div>
</template><script>
export default {}
</script><style scoped>/* 面包屑样式 */.el-breadcrumb {padding-bottom: 20px;}/* 详情样式 */.detail img {width: 100%;}.detail .title{font-weight: bold;font-size: 20px;}.detail .star{padding: 10px 0;}.detail .price{padding: 10px 0;color: #F56C6C;}/* 详情明细样式 */.el-tabs img {width: 100%;}/* 章节样式【可选】,显示彩虹色图标 */.el-icon-menu{margin-right: 5px;background: -webkit-linear-gradient(left top,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* Safari 5.1 - 6 */background: -o-linear-gradient(bottom right,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* Opera 11.1 - 12*/background: -moz-linear-gradient(bottom right,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* Firefox 3.6 - 15*/background: linear-gradient(to bottom right,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* 标准的语法 */color: #ff00006e;}.el-icon-video-play{margin-left: 15px;margin-right: 5px;background: -webkit-radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* Firefox 3.6 - 15 */background: radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* 标准的语法 */}
</style>

1.5.8 课程详情明细之用户评论

l 使用头像（avatar）处理用户评论中图片显示

l 官方文档： https://element.eleme.cn/#/zh-CN/component/avatar

<template><div id="course"><!-- 面包屑,分类条 --><el-breadcrumb separator-class="el-icon-arrow-right"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item :to="{ path: '/web' }">网页前端</el-breadcrumb-item><el-breadcrumb-item>Vue全家桶</el-breadcrumb-item></el-breadcrumb><!-- 详情 start --><el-row class="detail" :gutter="20"><el-col :span="14"><img src="@/assets/course.jpg" alt=""></el-col><el-col :span="10"><el-card class="box-card"><!-- 标题 --><div class="title">Vue全家桶</div><!-- 评分 --><div class="star"><el-rate:value="3.5"disabledshow-scoretext-color="#ff9900"score-template="3.5"></el-rate></div><!-- 标签 --><div><el-button type="primary" plain size="mini">高级</el-button><el-button type="primary" plain size="mini">前端</el-button><el-button type="primary" plain size="mini">Vue</el-button></div><!-- 价格 --><div class="price">￥ 998.12 元</div><!-- 按钮 --><div class="button"><el-button type="danger" size="medium">加入购物车</el-button><el-button type="danger" size="medium">立即购买</el-button></div></el-card></el-col></el-row><!-- 详情 end --><!-- 详情明细 start --><el-tabs value="third"><el-tab-pane label="课程介绍" name="first"><span slot="label"><i class="el-icon-date"></i> 课程介绍</span><!-- 课程介绍: 图片填充 --><img v-for="(o,i) in 6" :key="i" src="@/assets/course.jpg" alt=""></el-tab-pane><el-tab-pane label="章节" name="second"><!-- 章节内容 start 提供数组,展开所有折叠层 --><el-collapse :value="['1','2','3']"><el-collapse-item title="第1章 Vue基础语法" name="1"><template slot="title"><i class="el-icon-menu"></i>第1章 Vue基础语法</template><div><i class="el-icon-video-play"></i>1-1 创建第一个Vue实例</div><div><i class="el-icon-video-play"></i>1-2 挂载点，模版与实例</div><div><i class="el-icon-video-play"></i>1-3 Vue实例中的数据,事件和方法</div><div><i class="el-icon-video-play"></i>1-4 Vue中的属性绑定和双向数据绑定</div><div><i class="el-icon-video-play"></i>1-5 Vue中的计算属性和侦听器</div><div><i class="el-icon-video-play"></i>1-6 v-if, v-show与v-for指令</div></el-collapse-item><el-collapse-item title="第2章 Vue中的组件" name="2"><template slot="title"><i class="el-icon-menu"></i>第2章 Vue中的组件</template><div><i class="el-icon-video-play"></i>2-1 todolist功能开发</div><div><i class="el-icon-video-play"></i>2-2 todolist组件拆分</div><div><i class="el-icon-video-play"></i>2-3 组件与实例的关系</div><div><i class="el-icon-video-play"></i>2-4 实现todolist的删除功能</div></el-collapse-item><el-collapse-item title="第3章 Vue-cli的使用" name="3"><template slot="title"><i class="el-icon-menu"></i>第3章 Vue-cli的使用</template><div><i class="el-icon-video-play"></i>3-1 vue-cli的简介与使用</div><div><i class="el-icon-video-play"></i>3-2 使用vue-cli开发TodoList</div><div><i class="el-icon-video-play"></i>3-3 全局样式与局部样式</div><div><i class="el-icon-video-play"></i>3-4 课程总结</div></el-collapse-item></el-collapse><!-- 章节内容 end --></el-tab-pane><el-tab-pane label="用户评论" name="third" class="comment"><!-- 评论内容 start --><el-row :gutter="20"><el-col :span="16"><el-card class="box-card"><!-- 评论列表 --><el-row :gutter="20" v-for="(o,i) in 10" :key="i" class="comment-item"><el-col :span="4"><div class="block"><el-avatar shape="square" :size="80" fit="fill" src="https://c-ssl.duitang.com/uploads/item/201701/06/20170106235813_JGhMY.thumb.700_0.jpeg"></el-avatar></div></el-col><el-col :span="20"><span class="name">流浪的浪人{{i+1}} </span><el-rate:value="3.5 * (i + 1) % 5"disabledshow-scoretext-color="#ff9900"score-template="{value}" style="display: inline-block;"></el-rate><time v-html="new Date().toLocaleDateString()"></time><div class="content">真的特别好的一门课...能让我停不下来的可真的不多。条理清楚，重点清楚。听了这个课感觉看书都顺畅很多。不然那些专业书看的我特别困。结合起来看不知道有多舒服，反正就是舒服...</div></el-col></el-row></el-card></el-col><el-col :span="8"><!-- 右侧作者信息 --><el-card class="box-card rate"><h2>4.91</h2><el-rate:value="4.91":max="5"disabled:show-score = "false"text-color="#ff9900"score-template="4.91"></el-rate><span>220人评论</span></el-card><div class="teacher"><h2>讲师</h2><div class="block"><el-avatar :size="50" src="http://2f.zol-img.com.cn/product/2/585/ceU6Kg5htvEZ2.jpg"></el-avatar><span class="name">奔跑的蜗牛</span></div><div class="description">一个为技术而生的宅男,5岁学汇编,10岁精通各种语言,15岁搞定大数据,20岁创T语言,30岁统一程序世界,35岁退隐江湖....</div></div></el-col></el-row><!-- 评论内容 end --></el-tab-pane></el-tabs><!-- 详情明细 end --></div>
</template><script>
export default {}
</script><style scoped>/* 面包屑样式 */.el-breadcrumb {padding-bottom: 20px;}/* 详情样式 */.detail img {width: 100%;}.detail .title{font-weight: bold;font-size: 20px;}.detail .star{padding: 10px 0;}.detail .price{padding: 10px 0;color: #F56C6C;}/* 详情明细样式 */.el-tabs img {width: 100%;}/* 章节样式[可选] */.el-icon-menu{margin-right: 5px;background: -webkit-linear-gradient(left top,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* Safari 5.1 - 6 */background: -o-linear-gradient(bottom right,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* Opera 11.1 - 12*/background: -moz-linear-gradient(bottom right,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* Firefox 3.6 - 15*/background: linear-gradient(to bottom right,#ff0000 0%,#ffb600 11%,#fff600 22%,#a5ff00 33%,#00a9ff 44%,#0400ff 55%,#8a00fc 66%,#ff00e9 77%,#ff0059 88%,#ff0000 100%); /* 标准的语法 */color: #ff00006e;}.el-icon-video-play{margin-left: 15px;margin-right: 5px;background: -webkit-radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* Opera 11.6 - 12.0 */background: -moz-radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* Firefox 3.6 - 15 */background: radial-gradient(#ff0000 0%,#ff0000 11%,#ffb600 11%,#ffb600 22%,#fff600 22%,#fff600 33%,#a5ff00 33%,#a5ff00 44%,#00a9ff 44%,#00a9ff 55%,#0400ff 55%,#0400ff 66%,#8a00fc 66%,#8a00fc 77%,#ff00e9 77%,#ff00e9 88%,#ff0000 88%,#ff0000 100%); /* 标准的语法 */}.comment .rate{text-align: center;background-color: #F2F6FC;}.comment .rate h2 {font-size: 36px;font-weight: bold;color: #909399;}.comment .teacher h2{font-weight: bold;margin: 20px 0;}.comment .teacher .name{/* 名字水平居中 */vertical-align: top;display: inline-block;height: 50px;line-height: 50px;margin-left: 10px;}.comment .teacher .description{/* 首行缩进2个字 */text-indent: 2em;}.comment .comment-item {border-bottom: 1px solid #9999996e;margin-bottom: 10px;padding-bottom: 10px;}.comment .comment-item .name {font-weight: bold;margin-right: 10px;}.comment .comment-item time{float: right;}.comment .comment-item .content{}</style>

Element UI练习相关推荐

charts混合使用 elementui和e_vue模块化(echart+element ui)
最近看了下vue的框架,随手做了个项目,记录分享下技术框架: vue.js + webpack + element ui + echart 首先看下npm package.js 上面的图主要是配置 ...
Vue HTML：在Vue上写Html遇到的一些问题，html的首行缩进，html的行间距，element UI的回到顶部不显示
Vue & HTML:在Vue上写Html遇到的一些问题,html的首行缩进,html的行间距,element UI的回到顶部不显示资源: HTML 教程- (HTML5 标准) 怎么快速上 ...
vue的$nextTick使用总结，this.$refs为undefined的解决办法，element Ui的树形控件setCheckedKeys方法无法使用
vue的$nextTick使用总结,this.$refs为undefined的解决办法,element Ui的树形控件setCheckedKeys方法无法使用参考文章: (1)vue的$nextTi ...
vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
easyui前端实现多选框_前端：Element UI 多选框组用法笔记
今天给大家分享一下Element UI 多选框组用法笔记,直接上代码! "兴趣爱好:"> "form.checkList"> for= {{item ...
Element UI级联选择器(Cascader)获取级联对象
Element UI Cascader官网文档 GIF 代码: getCascaderObj = function(val, opt){return val.map(function (value, ...
vue2.0 + element ui 实现表格穿梭框
element ui 官网里介绍了穿梭框(Transfer),但在实际使用过程中,会出现一些问题: 1.穿梭框里能放置的内容太少,不能满足复杂的业务需求. 2.当选项过多时,穿梭框很难实现分页,左右两 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
element ui走马灯怎么添加_Lovestu - Element UI 走马灯高度自适应
Element UI走马灯中,通过属性height来设置高度,但是设置就是死的,不能自适应.要自适应需要监控窗口宽度的变化. 网上别人分享的太复杂了,这儿有简单的方法实现高度自适应. 首先,确定图片的 ...
element ui 前台模板_用 Vue+ElementUI 搭建后台管理极简模板
本文由图雀社区成员https://blog.csdn.net/crxk_blog.csdn.net 写在前面此篇文章为一篇说明文档,不是教你从零构建一个后台管理系统,而是基于一个实际项目,已经搭建 ...

Element UI练习

1. Element UI

1.1 什么是Element UI

1.2 搭建环境

1.2.1 创建vue项目

1.2.2 安装 element-ui组件

1.3 综合案例: 主体架构

1.3.1 需求

1.3.2 布局

1.3.3 reset.css

1.3.4 导航条

1.3.5 页眉

1.3.6 路由

1.3.7 页面刷新导航选中问题

1.3.8 标记

1.4 综合案例: 首页

1.4.1 需求

1.4.2 轮播图

1.4.3 课程列表之布局

1.4.4 课程列表之详情(卡片)

1.5 综合案例: 课程详情页

1.5.1 需求

1.5.2 显示详情页面

1.5.3 分类导航

1.5.4 课程详情

1.5.5 课程详情明细

1.5.6 课程详情明细之课程介绍

1.5.7 课程详情明细之章节

1.5.8 课程详情明细之用户评论

Element UI练习相关推荐

最新文章

热门文章

Element UI练习

1. Element UI

1.1 什么是Element UI

1.2 搭建环境

1.2.1 创建vue项目

1.2.2 安装 element-ui组件

1.3 综合案例: 主体架构

1.3.1 需求

1.3.2 布局

1.3.3 reset.css

1.3.4 导航条

1.3.5 页眉

1.3.6 路由

1.3.7 页面刷新导航选中问题

1.3.8 标记

1.4 **综合案例: **首页

1.4.1 需求

1.4.2 轮播图

1.4.3 课程列表之布局

1.4.4 课程列表之详情(卡片)

1.5 综合案例: 课程详情页

1.5.1 需求

1.5.2 显示详情页面

1.5.3 分类导航

1.5.4 课程详情

1.5.5 课程详情明细

1.5.6 课程详情明细之课程介绍

1.5.7 课程详情明细之章节

1.5.8 课程详情明细之用户评论

Element UI练习相关推荐

最新文章

热门文章

1.4 综合案例: 首页