01-首页-路由与组件
目的: 搭建页面架子,便于接下来进行页面布局组件编写。
- 根组件下定义一级路由组件出口
src/App.vue
<template>
<!-- 一级路由 -->
<router-view></router-view>
</template>
- 一级路由布局容器
src/views/Layout.vue
<template>
<nav>顶部通栏</nav>
<header>头部</header>
<main>
<!-- 二级路由 -->
<router-view></router-view>
</main>
<footer>底部</footer>
</template>
<script>
export default {
name: 'xtx-layout'
}
</script>
<style scoped lang='less'></style>
- 二级路由首页组件
src/views/home/index.vue
<template>
<div class='xtx-home-page'>
首页
</div>
</template>
<script>
export default {
name: 'xtx-home-page'
}
</script>
<style scoped lang='less'></style>
- 配置路由规则
src/router/index.js
import { createRouter, createWebHashHistory } from 'vue-router'
+const Layout = () => import('@/views/Layout')
+const Home = () => import('@/views/home/index')
const routes = [
+ {
+ path: '/',
+ component: Layout,
+ children: [
+ { path: '/', component: Home }
+ ]
+ }
]
const router = createRouter({
history: createWebHashHistory(),
routes
})
export default router
总结: 配置首页的路由规则,由Layout和首页组件组成。
#02-首页-less的自动化导入
目的: 准备常用less变量,混入代码,完成自动导入。
抽取公用的变量和代码 :
1)准备要用的变量和混入代码
- 变量
src/assets/styles/variables.less
// 主题
@xtxColor:#27BA9B;
// 辅助
@helpColor:#E26237;
// 成功
@sucColor:#1DC779;
// 警告
@warnColor:#FFB302;
// 价格
@priceColor:#CF4444;
- 混入
src/assets/styles/mixins.less
// 鼠标经过上移阴影动画
.hoverShadow () {
transition: all .5s;
&:hover {
transform: translate3d(0,-3px,0);
box-shadow: 0 3px 8px rgba(0,0,0,0.2);
}
}
使用:
================
less混入就是,申明一段css代码(选择器包裹的代码)或者函数,在其他css选择器调用,可复用包裹的代码。
编写:
使用:
2)完成自动注入公用变量和混入
遇到问题: 每次使用公用的变量和mixin的时候需要单独引入到文件中。
解决方法: 使用vuecli的style-resoures-loader插件来完成自动注入到每个less文件或者vue组件中style标签中。
- 在当前项目下执行一下命令
vue add style-resources-loader
,添加一个vuecli的插件
- 安装完毕后会在
vue.config.js
中自动添加配置,如下:
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: []
}
}
}
- 把你需要注入的文件配置一下后,重启服务即可。
+const path = require('path')
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
+ path.join(__dirname, './src/assets/styles/variables.less'),
+ path.join(__dirname, './src/assets/styles/mixins.less')
]
}
}
}
测试: 不导入目录可不可以使用:
总结: 知道如何定义less变量和混入代码并使用他们,通过vue-resources-loader完成代码注入再每个less文件和vue组件中。
#03-首页-样式重置与公用
目的: 准备网站所需的重置样式代码,以及一些公用样式代码。
- 重置样式
执行 npm i normalize.css
安装重置样式的包,然后在 main.js
导入 normalize.css
即可。
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+import 'normalize.css'
createApp(App).use(store).use(router).mount('#app')
- 公用样式
新建文件 src/assets/styles/common.less
在该文件写入常用的样式,然后在 main.js
导入即可。
src/assets/styles/common.less
// 重置样式
* {
box-sizing: border-box;
}
html {
height: 100%;
font-size: 14px;
}
body {
height: 100%;
color: #333;
min-width: 1240px;
font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
}
ul,
h1,
h3,
h4,
p,
dl,
dd {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
color: #333;
outline: none;
}
i {
font-style: normal;
}
input[type="text"],
input[type="search"],
input[type="password"],
input[type="checkbox"]{
padding: 0;
outline: none;
border: none;
-webkit-appearance: none;
&::placeholder{
color: #ccc;
}
}
img {
max-width: 100%;
max-height: 100%;
vertical-align: middle;
}
ul {
list-style: none;
}
#app {
background: #f5f5f5;
user-select: none;
}
.container {
width: 1240px;
margin: 0 auto;
position: relative;
}
.ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.ellipsis-2 {
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
line-height: 0;
clear: both;
}
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+ import 'normalize.css'
+ import '@/assets/styles/common.less'
createApp(App).use(store).use(router).mount('#app')
总结: 重置样式使用normalize.css,项目公用样式common.less
#04-首页-顶部通栏布局
目的: 完成顶部通栏组件。
大致步骤:
1)在 public/index.html
引入字体图标文件。
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <link rel="stylesheet" href="//at.alicdn.com/t/font_2143783_iq6z4ey5vu.css">
<title><%= htmlWebpackPlugin.options.title %></title>
2)在 src/components/
下新建 app-topnav.vue
组件,基础布局如下:
<template>
<nav class="app-topnav">
<div class="container">
<ul>
<li><a href="javascript:;"><i class="iconfont icon-user"></i>周杰伦</a></li>
<li><a href="javascript:;">退出登录</a></li>
<li><a href="javascript:;">请先登录</a></li>
<li><a href="javascript:;">免费注册</a></li>
<li><a href="javascript:;">我的订单</a></li>
<li><a href="javascript:;">会员中心</a></li>
<li><a href="javascript:;">帮助中心</a></li>
<li><a href="javascript:;">关于我们</a></li>
<li><a href="javascript:;"><i class="iconfont icon-phone"></i>手机版</a></li>
</ul>
</div>
</nav>
</template>
<script>
export default {
name: 'AppTopnav'
}
</script>
<style scoped lang="less">
.app-topnav {
background: #333;
ul {
display: flex;
height: 53px;
justify-content: flex-end;
align-items: center;
li {
a {
padding: 0 15px;
color: #cdcdcd;
line-height: 1;
display: inline-block;
i {
font-size: 14px;
margin-right: 2px;
}
&:hover {
color: @xtxColor;
}
}
~ li {
a {
border-left: 2px solid #666;
}
}
}
}
}
</style>
~li 所有的li 都加样式
添加竖线:
a: display: inline-block;
border-left: 2px solid #666;
3)在 src/views/Layout.vue
中导入使用。
<template>
+ <AppTopnav/>
<header>头部</header>
<main>
<!-- 二级路由 -->
<router-view></router-view>
</main>
<footer>底部</footer>
</template>
<script>
+import AppTopnav from '@/components/app-topnav'
export default {
name: 'XtxLayout',
+ components: { AppTopnav }
}
</script>
<style scoped lang='less'></style>
4)根据当前的登录状态显示 用户名和退出登录
<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
name: 'AppTopnav',
setup () {
const store = useStore()
const profile = computed(()=>{
return store.state.user.profile
})
return { profile }
}
}
</script>
<template v-if="profile.token">
<li><a href="javascript:;"><i class="iconfont icon-user"></i>{{profile.account}}</a></li>
<li><a href="javascript:;">退出登录</a></li>
</template>
<template v-else>
<li><a href="javascript:;">请先登录</a></li>
<li><a href="javascript:;">免费注册</a></li>
</template>
或者:
总结: 完成基础布局,根据用户信息动态展示导航菜单。
#05-首页-头部布局
目的: 完成首页头部布局,了解结构。
大致步骤:
- 1)在
src/components/
下新建app-header.vue
组件,基础布局如下:
<template>
<header class='app-header'>
<div class="container">
<h1 class="logo"><RouterLink to="/">小兔鲜</RouterLink></h1>
<ul class="navs">
<li class="home"><RouterLink to="/">首页</RouterLink></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#">艺术</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
<li><a href="#">杂货</a></li>
</ul>
<div class="search">
<i class="iconfont icon-search"></i>
<input type="text" placeholder="搜一搜">
</div>
<div class="cart">
<a class="curr" href="#">
<i class="iconfont icon-cart"></i><em>2</em>
</a>
</div>
</div>
</header>
</template>
<script>
export default {
name: 'AppHeader'
}
</script>
<style scoped lang='less'>
.app-header {
background: #fff;
.container {
display: flex;
align-items: center;
}
.logo {
width: 200px;
a {
display: block;
height: 132px;
width: 100%;
text-indent: -9999px;
background: url(../assets/images/logo.png) no-repeat center 18px / contain;
}
}
.navs {
width: 820px;
display: flex;
justify-content: space-around;
padding-left: 40px;
li {
margin-right: 40px;
width: 38px;
text-align: center;
a {
font-size: 16px;
line-height: 32px;
height: 32px;
display: inline-block;
}
&:hover {
a {
color: @xtxColor;
border-bottom: 1px solid @xtxColor;
}
}
}
}
.search {
width: 170px;
height: 32px;
position: relative;
border-bottom: 1px solid #e7e7e7;
line-height: 32px;
.icon-search {
font-size: 18px;
margin-left: 5px;
}
input {
width: 140px;
padding-left: 5px;
color: #666;
}
}
.cart {
width: 50px;
.curr {
height: 32px;
line-height: 32px;
text-align: center;
position: relative;
display: block;
.icon-cart{
font-size: 22px;
}
em {
font-style: normal;
position: absolute;
right: 0;
top: 0;
padding: 1px 6px;
line-height: 1;
background: @helpColor;
color: #fff;
font-size: 12px;
border-radius: 10px;
font-family: Arial;
}
}
}
}
</style>
- 2)在
src/views/Layout.vue
中导入使用。
<template>
<AppTopnav/>
+ <AppHeader/>
<main>
<!-- 二级路由 -->
<router-view></router-view>
</main>
<footer>底部</footer>
</template>
<script>
import AppTopnav from '@/components/app-topnav'
+import AppHeader from '@/components/app-header'
export default {
name: 'XtxLayout',
+ components: { AppTopnav, AppHeader }
}
</script>
<style scoped lang='less'></style>
总结: 准备了一个静态的头部组件,了解其结构。
#06-首页-底部布局
目的: 完成首页底部布局。
首先,在 src/components/
下新建 app-footer.vue
组件,基础布局如下:
<template>
<footer class="app-footer">
<!-- 联系我们 -->
<div class="contact">
<div class="container">
<dl>
<dt>客户服务</dt>
<dd><i class="iconfont icon-kefu"></i> 在线客服</dd>
<dd><i class="iconfont icon-question"></i> 问题反馈</dd>
</dl>
<dl>
<dt>关注我们</dt>
<dd><i class="iconfont icon-weixin"></i> 公众号</dd>
<dd><i class="iconfont icon-weibo"></i> 微博</dd>
</dl>
<dl>
<dt>下载APP</dt>
<dd class="qrcode"><img src="../assets/images/qrcode.jpg" /></dd>
<dd class="download">
<span>扫描二维码</span>
<span>立马下载APP</span>
<a href="javascript:;">下载页面</a>
</dd>
</dl>
<dl>
<dt>服务热线</dt>
<dd class="hotline">400-0000-000 <small>周一至周日 8:00-18:00</small></dd>
</dl>
</div>
</div>
<!-- 其它 -->
<div class="extra">
<div class="container">
<div class="slogan">
<a href="javascript:;">
<i class="iconfont icon-footer01"></i>
<span>价格亲民</span>
</a>
<a href="javascript:;">
<i class="iconfont icon-footer02"></i>
<span>物流快捷</span>
</a>
<a href="javascript:;">
<i class="iconfont icon-footer03"></i>
<span>品质新鲜</span>
</a>
</div>
<!-- 版权信息 -->
<div class="copyright">
<p>
<a href="javascript:;">关于我们</a>
<a href="javascript:;">帮助中心</a>
<a href="javascript:;">售后服务</a>
<a href="javascript:;">配送与验收</a>
<a href="javascript:;">商务合作</a>
<a href="javascript:;">搜索推荐</a>
<a href="javascript:;">友情链接</a>
</p>
<p>CopyRight © 小兔鲜儿</p>
</div>
</div>
</div>
</footer>
</template>
<script>
export default {
name: 'AppFooter'
}
</script>
<style scoped lang='less'>
.app-footer {
overflow: hidden;
background-color: #f5f5f5;
padding-top: 20px;
.contact {
background: #fff;
.container {
padding: 60px 0 40px 25px;
display: flex;
}
dl {
height: 190px;
text-align: center;
padding: 0 72px;
border-right: 1px solid #f2f2f2;
color: #999;
&:first-child {
padding-left: 0;
}
&:last-child {
border-right: none;
padding-right: 0;
}
}
dt {
line-height: 1;
font-size: 18px;
}
dd {
margin: 36px 12px 0 0;
float: left;
width: 92px;
height: 92px;
padding-top: 10px;
border: 1px solid #ededed;
.iconfont {
font-size: 36px;
display: block;
color: #666;
}
&:hover {
.iconfont {
color: @xtxColor;
}
}
&:last-child {
margin-right: 0;
}
}
.qrcode {
width: 92px;
height: 92px;
padding: 7px;
border: 1px solid #ededed;
}
.download {
padding-top: 5px;
font-size: 14px;
width: auto;
height: auto;
border: none;
span {
display: block;
}
a {
display: block;
line-height: 1;
padding: 10px 25px;
margin-top: 5px;
color: #fff;
border-radius: 2px;
background-color: @xtxColor;
}
}
.hotline {
padding-top: 20px;
font-size: 22px;
color: #666;
width: auto;
height: auto;
border: none;
small {
display: block;
font-size: 15px;
color: #999;
}
}
}
.extra {
background-color: #333;
}
.slogan {
height: 178px;
line-height: 58px;
padding: 60px 100px;
border-bottom: 1px solid #434343;
display: flex;
justify-content: space-between;
a {
height: 58px;
line-height: 58px;
color: #fff;
font-size: 28px;
i {
font-size: 50px;
vertical-align: middle;
margin-right: 10px;
font-weight: 100;
}
span {
vertical-align: middle;
text-shadow: 0 0 1px #333;
}
}
}
.copyright {
height: 170px;
padding-top: 40px;
text-align: center;
color: #999;
font-size: 15px;
p {
line-height: 1;
margin-bottom: 20px;
}
a {
color: #999;
line-height: 1;
padding: 0 10px;
border-right: 1px solid #999;
&:last-child {
border-right: none;
}
}
}
}
</style>
最后,在 src/views/Layout.vue
中导入使用。
<template>
<AppTopnav/>
<AppHeader/>
<main class="app-body">
<!-- 二级路由 -->
<router-view></router-view>
</main>
+ <AppFooter/>
</template>
<script>
import AppTopnav from '@/components/app-topnav'
import AppHeader from '@/components/app-header'
+import AppFooter from '@/components/app-footer'
export default {
name: 'XtxLayout',
+ components: { AppTopnav, AppHeader, AppFooter }
}
</script>
<style scoped lang='less'>
+.app-body {
+ min-height: 600px;
+}
</style>
#07-首页-头部分类导航组件
目的: 提取头部分类导航组件,提供给头部,和将来的吸顶头部使用。
头部导航‘:
吸顶:
第一步:提取头部导航为一个组件
- 新建
src/components/app-header-nav.vue
组件。
<template>
<ul class="app-header-nav">
<li class="home"><RouterLink to="/">首页</RouterLink></li>
<li><a href="#">美食</a></li>
<li><a href="#">餐厨</a></li>
<li><a href="#">艺术</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
<li><a href="#">杂货</a></li>
</ul>
</template>
<script>
export default {
name: 'AppHeaderNav'
}
</script>
<style scoped lang='less'>
.app-header-nav {
width: 820px;
display: flex;
padding-left: 40px;
position: relative;
z-index: 998;
li {
margin-right: 40px;
width: 38px;
text-align: center;
a {
font-size: 16px;
line-height: 32px;
height: 32px;
display: inline-block;
}
&:hover {
a {
color: @xtxColor;
border-bottom: 1px solid @xtxColor;
}
}
}
}
</style>
- 在
app-header.vue
中使用组件。注意,删除结构和样式。
<template>
<header class='app-header'>
<div class="container">
<h1 class="logo"><RouterLink to="/">小兔鲜</RouterLink></h1>
+ <AppHeaderNav />
<div class="search">
<i class="iconfont icon-search"></i>
<input type="text" placeholder="搜一搜">
</div>
<div class="cart">
<a class="curr" href="#">
<i class="iconfont icon-cart"></i><em>2</em>
</a>
</div>
</div>
</header>
</template>
<script>
+import AppHeaderNav from './app-header-nav'
export default {
name: 'AppHeader',
+ components: { AppHeaderNav }
}
</script>
第二步:完善子级分类布局 src/components/app-header-nav.vue
<template>
<ul class="app-header-nav">
<li class="home"><RouterLink to="/">首页</RouterLink></li>
<li>
<a href="#">美食</a>
<div class="layer">
<ul>
<li v-for="i in 10" :key="i">
<a href="#">
<img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/img/category%20(4).png" alt="">
<p>果干</p>
</a>
</li>
</ul>
</div>
</li>
<li><a href="#">餐厨</a></li>
<li><a href="#">艺术</a></li>
<li><a href="#">电器</a></li>
<li><a href="#">居家</a></li>
<li><a href="#">洗护</a></li>
<li><a href="#">孕婴</a></li>
<li><a href="#">服装</a></li>
<li><a href="#">杂货</a></li>
</ul>
</template>
<script>
export default {
name: 'AppHeaderNav'
}
</script>
<style scoped lang='less'>
.app-header-nav {
width: 820px;
display: flex;
justify-content: space-around;
padding-left: 40px;
position: relative;
z-index: 998;
> li {
margin-right: 40px;
width: 38px;
text-align: center;
> a {
font-size: 16px;
line-height: 32px;
height: 32px;
display: inline-block;
}
&:hover {
> a {
color: @xtxColor;
border-bottom: 1px solid @xtxColor;
}
> .layer {
height: 132px;
opacity: 1;
}
}
}
}
.layer {
width: 1240px;
background-color: #fff;
position: absolute;
left: -200px;
top: 56px;
height: 0;
overflow: hidden;
opacity: 0;
box-shadow: 0 0 5px #ccc;
transition: all .2s .1s;
ul {
display: flex;
flex-wrap: wrap;
padding: 0 70px;
align-items: center;
height: 132px;
li {
width: 110px;
text-align: center;
img {
width: 60px;
height: 60px;
}
p {
padding-top: 10px;
}
&:hover {
p {
color: @xtxColor;
}
}
}
}
}
</style>
>li只对后代生效
#08-首页-头部分类导航渲染
目的: 实现头部一级分类和二级分类渲染。
基本步骤:
- 定义一个常量数据和后台保持一致(约定好9大分类),这样不请求后台就能展示一级分类,不至于白屏。
- 在API目录定义接口函数
- 在vuex中的category模块,基于常量数据定义state数据,定义修改分类列表函数,定义获取数据函数。
- 在Layout组件获取调用actions获取数据,在头部导航组件渲染即可。
落地代码:
- 定义九个分类常量数据
src/api/constants.js
// 顶级分类
export const topCategory = [
'居家',
'美食',
'服饰',
'母婴',
'个护',
'严选',
'数码',
'运动',
'杂货'
]
- 定义API函数
src/api/category.js
// 定义首页需要的接口函数
import request from '@/utils/request'
/**
* 获取首页头部分类数据
*/
export const findAllCategory = () => {
return request('/home/category/head', 'get')
}
- vuex在category模块,来存储分类数据,提供修改和获取的函数。
src/store/modules/category.js
// 存储的分类数据
import { topCategory } from '@/api/constants'
import { findAllCategory } from '@/api/category'
export default {
namespaced: true,
state: () => {
return {
// 如果默认是[]数组,看不见默认的9个分类,等你数据加载完毕才会看到。
// 所以:根据常量数据来生成一个默认的顶级分类数据,不会出现空白(没数据的情况)
list: topCategory.map(item => ({ name: item }))
}
},
// 加载数据成功后需要修改list所以需要mutations函数
mutations: {
setList (state, headCategory) {
state.list = headCategory
}
},
// 需要向后台加载数据,所以需要actions函数获取数据
actions: {
async getList ({ commit }) {
const { result } = await findAllCategory()
// 获取数据成功,提交mutations进行数据修改
commit('setList ', result)
}
}
}
- 获取数据在
src/views/Layout.vue
初始化的时候
export default {
name: 'Layout',
components: {
AppTopnav,
AppHeader,
AppFooter
},
+ // 获取下分类数据
+ setup () {
+ const store = useStore()
+ store.dispatch('category/getList')
+ }
}
- 在头部导航组件渲染
src/compotents/app-header-nav.vue
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
name: 'AppHeaderNav',
setup () {
const store = useStore()
const list = computed(()=>{
return store.state.category.list
})
return { list }
}
}
<ul class="app-header-nav">
<li class="home"><RouterLink to="/">首页</RouterLink></li>
<li v-for="item in list" :key="item.id">
<RouterLink to="/">{{item.name}}</RouterLink>
<div class="layer">
<ul>
<li v-for="sub in item.children" :key="sub.id">
<RouterLink to="/">
<img :src="sub.picture" alt="">
<p>{{sub.name}}</p>
</RouterLink>
</li>
</ul>
</div>
</li>
</ul>
有跳转,将a换成RouterLink
总结: 数据在vuex中管理,然后再组件使用数据进行渲染。
#09-首页-头部分类导航交互
目的:实现点击的时候跳转,且能关闭二级分类弹窗。
描述:由于是单页面路由跳转不会刷新页面,css的hover一直触发无法关闭分类弹窗。
大致逻辑:
- 配置路由组件支持分类跳转
- 鼠标进入一级分类展示对应的二级分类弹窗
- 点击一级分类,二级分类,隐藏二级分类弹窗
- 离开一级分类,二级分类,隐藏二级分类弹窗
落地代码:
1) 配置路由和组件实现跳转
- 创建分类组件
src/views/category/index.vue
<template>
<div>Top-Category</div>
</template>
<script>
export default {
name: 'TopCategory'
}
</script>
<style scoped lang="less"></style>
src/views/category/sub.vue
<template>
<div>Sub-Category</div>
</template>
<script>
export default {
name: 'SubCategory'
}
</script>
<style scoped lang="less"></style>
- 配置路由规则
src/router/index.js
+import TopCategory from '@/views/category'
+import SubCategory from '@/views/category/sub'
const routes = [
{
path: '/',
component: Layout,
children: [
{ path: '/', component: Home },
+ { path: '/category/:id', component: TopCategory },
+ { path: '/category/sub/:id', component: SubCategory }
]
}
]
点击分类发现弹窗还在
2)跳转后关闭二级分类弹窗
- 给每一个一级分类定义控制显示隐藏的数据,
open
布尔类型,通过open设置类名控制显示隐藏。 - 当进入一级分类的时候,将open改为true
- 当离开一级分类的时候,将open改为false
- 点击一级分类,二级分类,将open改为false
详细:
在vuex种给一级分类加open数据 src/store/modules/category.js
async getCategory ({ commit }) {
const { result } = await findHeadCategory()
// 给一级分类加上一个控制二级分类显示隐藏的数据open
+ result.forEach(item => {
+ item.open = false
+ })
// 获取数据成功,提交mutations进行数据修改
commit('setCategory', result)
}
添加了 show hide vuex的mutations函数修改 open src/store/modules/category.js
// 修改当前一级分类下的open数据为true
show (state, item) {
const category = state.list.find(category => category.id === item.id)
category.open = true
},
// 修改当前一级分类下的open数据为false
hide (state, item) {
const category = state.list.find(category => category.id === item.id)
category.open = false
}
再 头部导航组件 实现显示和隐藏 src/components/app-header-nav.vue
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
name: 'AppHeaderNav',
setup () {
const store = useStore()
const list = computed(()=>{
return store.state.category.list
})
+ const show = (item) => {
+ store.commit('category/show', item)
+ }
+ const hide = (item) => {
+ store.commit('category/hide', item)
+ }
+ return { list, show, hide}
}
}
+ <li v-for="item in list" :key="item.id" @mouseenter="show(item)" @mouseleave="hide(item)">
+ <RouterLink :to="`/category/${item.id}`" @click="hide(item)">{{item.name}}</RouterLink>
<div class="layer" :class="{open:item.open}">
<ul>
<li v-for="sub in item.children" :key="sub.id">
+ <RouterLink :to="`/category/sub/${sub.id}`" @click="hide(item)">
<img :src="sub.picture" alt="">
<p>{{sub.name}}</p>
</RouterLink>
</li>
</ul>
</div>
</li>
- // > .layer {
- // height: 132px;
- // opacity: 1;
- // }
}
}
}
.layer {
+ &.open {
+ height: 132px;
+ opacity: 1;
+ }
总结: 再组件中调用vuex的mutation函数控制每个一级分类下二级分类的显示隐藏。
#10-首页-吸顶头部组件-传统实现
目的: 完成吸顶头部
大致步骤:
- 准备吸顶组件基础布局
- 页面滚动到78px以上,显示吸顶组件。
落地代码:
- 新建
src/components/app-header-sticky.vue
组件完成布局
<template>
<div class="app-header-sticky">
<div class="container">
<RouterLink class="logo" to="/" />
<AppHeaderNav />
<div class="right">
<RouterLink to="/" >品牌</RouterLink>
<RouterLink to="/" >专题</RouterLink>
</div>
</div>
</div>
</template>
<script>
import AppHeaderNav from './app-header-nav'
export default {
name: 'AppHeaderSticky',
components: { AppHeaderNav }
}
</script>
<style scoped lang='less'>
.app-header-sticky {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
.container {
display: flex;
align-items: center;
}
.logo {
width: 200px;
height: 80px;
background: url(../assets/images/logo.png) no-repeat right 2px;
background-size: 160px auto;
}
.right {
width: 220px;
display: flex;
text-align: center;
padding-left: 40px;
border-left: 2px solid @xtxColor;
a {
width: 38px;
margin-right: 40px;
font-size: 16px;
line-height: 1;
&:hover {
color: @xtxColor;
}
}
}
}
</style>
- 在滚动到78px完成显示效果,需要滑出动画
第一步:默认移出顶部且完全透明,定义一个类回到默认吸顶位置完全显示。
.app-header-sticky {
width: 100%;
height: 80px;
position: fixed;
left: 0;
top: 0;
z-index: 999;
background-color: #fff;
border-bottom: 1px solid #e4e4e4;
+ transform: translateY(-100%);
+ opacity: 0;
+ &.show {
+ transition: all 0.3s linear;
+ transform: none;
+ opacity: 1;
+ }
第二步:组件渲染后,监听滚动距离超过78px隐藏
import AppHeaderNav from './app-header-nav'
+import { onMounted, ref } from 'vue'
export default {
name: 'AppHeaderSticky',
components: { AppHeaderNav },
+ setup () {
+ const y = ref(0)
+ onMounted(()=>{
+ window.onscroll = () => {
+ const scrollTop = document.documentElement.scrollTop
+ y.value = scrollTop
+ }
+ })
+ return { y }
+ }
}
+ <div class="app-header-sticky" :class="{show:y>=78}">
第三步:v-show使用,为了吸顶头部的内容不遮住不吸顶的头部。
+ <div class="container" v-show="y>=78">
这是我们用的js来获取的, 也可以用@vueuse/core工具库:如下
#11-首页-吸顶头部组件-组合API
目的: 体验基于组合API的@vueuse/core工具库
安装:@vueuse/core 包,它封装了常见的一些交互逻辑。
npm i @vueuse/core@4.9.0
使用:src/components/app-header-sticky.vue
组件
<template>
<div class="app-header-sticky" :class="{show:y>=78}">
<div class="container" v-show="y>=78">
<RouterLink class="logo" to="/" />
<AppHeaderNav />
<div class="left">
<RouterLink to="/" >品牌</RouterLink>
<RouterLink to="/" >专题</RouterLink>
</div>
</div>
</div>
</template>
<script>
import AppHeaderNav from './app-header-nav'
import { useWindowScroll } from '@vueuse/core'
export default {
name: 'AppHeaderSticky',
components: { AppHeaderNav },
setup () {
const { y } = useWindowScroll()
return { y }
}
}
</script>
总结:
-
useWindowScroll() 是@vueuse/core提供的api可返回当前页面滚动时候蜷曲的距离。x横向,y纵向
-
vue3.0组合API提供了更多逻辑代码封装的能力。@vueuse/core 基于组合API封装好用的工具函数。
12-首页主体-左侧分类-结构渲染
目的: 实现首页主体内容-左侧分类
大致步骤:
- 准备左侧分类组件和基础布局
- 从vuex中拿出9个分类数据,且值需要两个子分类,但是左侧是10个,需要补充一个品牌数据。
- 使用计算属性完成上面逻辑
- 渲染组件
落地代码:
- 准备组件:
src/views/home/components/home-category.vu(假数据先布局)
<template>
<div class='home-category'>
<ul class="menu">
<li v-for="i in 10" :key="i">
<RouterLink to="/">居家</RouterLink>
<RouterLink to="/">洗漱</RouterLink>
<RouterLink to="/">清洁</RouterLink>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HomeCategory'
}
</script>
<style scoped lang='less'></style>
- 预览组件:
src/views/home/index.vue
<template>
<div class="page-home">
<div class="home-entry">
<div class="container">
<!-- 左侧分类 -->
<HomeCategory />
<!-- 轮播图 -->
</div>
</div>
</div>
</template>
<script>
import HomeCategory from './components/home-category'
export default {
name: 'PageHome',
components: { HomeCategory }
}
</script>
<style scoped lang="less"></style>
- 从vuex中拿出分类,取出子分类中的前两项。给一级分类追加一项品牌,进行渲染。
一个分类里边带两个子分类,不是所有的子分类,所以对数据进行筛选
第10行有一个假数据:
const brand = reactive({
id: 'brand',
name: '品牌',
children: [{ id: 'brand-chilren', name: '品牌推荐' }]
})
<template>
<div class='home-category'>
<ul class="menu">
<li v-for="item in menuList" :key="item.id">
<RouterLink :to="`/category/${item.id}`">{{item.name}}</RouterLink>
<template v-if="item.children">
<RouterLink
v-for="sub in item.children"
:key="sub.id"
:to="`/category/sub/${sub.id}`">
{{sub.name}}
</RouterLink>
</template>
</li>
</ul>
</div>
</template>
<script>
import { useStore } from 'vuex'
import { reactive, computed } from 'vue'
export default {
name: 'HomeCategory',
// 1. 获取vuex的一级分类,并且只需要两个二级分类
// 2. 需要在组件内部,定义一个品牌数据
// 3. 根据vuex的分类数据和组件中定义品牌数据,得到左侧分类完整数据(9分类+1品牌)数组
// 4. 进行渲染即可
setup () {
const brand = reactive({
id: 'brand',
name: '品牌',
children: [{ id: 'brand-chilren', name: '品牌推荐' }]
})
const store = useStore()
const menuList = computed(() {
const list = store.state.category.list.map(item => {
return {
id: item.id,
name: item.name,
// 防止初始化没有children的时候调用slice函数报错
children: item.children && item.children.slice(0, 2)
}
})
list.push(brand)
return list
})
return { menuList }
}
}
</script>
<style scoped lang='less'>
.home-category {
width: 250px;
height: 500px;
background: rgba(0,0,0,0.8);
position: relative;
z-index: 99;
.menu {
li {
padding-left: 40px;
height: 50px;
line-height: 50px;
&:hover {
background: @xtxColor;
}
a {
margin-right: 4px;
color: #fff;
&:first-child {
font-size: 16px;
}
}
}
}
}
</style>
#13-首页主体-左侧分类-弹层展示
目的: 实现首页主体内容-左侧分类-鼠标进入弹出
大致步骤:
- 准备布局
- 得到数据
- 鼠标经过记录ID
- 通过ID得到分类推荐商品,使用计算属性
- 完成渲染
落地代码:
- 准备布局:
src/views/home/components/home-category.vue
<!-- 弹层 -->
<div class="layer">
<h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
<ul>
<li v-for="i in 9" :key="i">
<RouterLink to="/">
<img src="https://yanxuan-item.nosdn.127.net/5a115da8f2f6489d8c71925de69fe7b8.png" alt="">
<div class="info">
<p class="name ellipsis-2">【定金购】严选零食大礼包(12件)</p>
<p class="desc ellipsis">超值组合装,满足馋嘴欲</p>
<p class="price"><i>¥</i>100.00</p>
</div>
</RouterLink>
</li>
</ul>
</div>
.layer {
width: 990px;
height: 500px;
background: rgba(255,255,255,0.8);
position: absolute;
left: 250px;
top: 0;
display: none;
padding: 0 15px;
h4 {
font-size: 20px;
font-weight: normal;
line-height: 80px;
small {
font-size: 16px;
color: #666;
}
}
ul {
display: flex;
flex-wrap: wrap;
li {
width: 310px;
height: 120px;
margin-right: 15px;
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 4px;
background: #fff;
&:nth-child(3n) {
margin-right: 0;
}
a {
display: flex;
width: 100%;
height: 100%;
align-items: center;
padding: 10px;
&:hover {
background: #e3f9f4;
}
img {
width: 95px;
height: 95px;
}
.info {
padding-left: 10px;
line-height: 24px;
width: 190px;
.name {
font-size: 16px;
color: #666;
}
.desc {
color: #999;
}
.price {
font-size: 22px;
color: @priceColor;
i {
font-size: 16px;
}
}
}
}
}
}
}
&:hover {
.layer {
display: block;
}
}
- 渲染逻辑:
src/views/home/components/home-category.vue
- 定义一个数据记录当前鼠标经过分类的ID,使用计算属性得到当前的分类推荐商品数据
<ul class="menu">
+ <li v-for="item in menuList" :key="item.id" @mouseenter="categoryId=item.id">
import { useStore } from 'vuex'
import { reactive, computed, ref } from 'vue'
export default {
name: 'HomeCategory',
setup () {
// 组织所有数据逻辑
// 1. 获取vuex的一级分类,并且只需要两个二级分类
// 2. 需要在组件内部,定义一个品牌数据
// 3. 根据vuex的分类数据和组件中定义品牌数据,得到左侧分类完整数据(9分类+1品牌)数组
// 4. 进行渲染即可
const brand = reactive({
id: 'brand',
name: '品牌',
children: [{ id: 'brand-chilren', name: '品牌推荐' }]
})
const store = useStore()
const menuList = computed(() {
const list = store.state.category.list.map(item => {
return {
id: item.id,
name: item.name,
// 防止初始化没有children的时候调用slice函数报错
children: item.children && item.children.slice(0, 2),
+ goods: item.goods
}
})
list.push(brand)
return list
})
+ // 获取当前分类逻辑
+ const categoryId = ref(null)
+ const currCategory = computed(()=>{
+ return menuList.value.find(item => item.id === categoryId.value)
+ })
+ return { menuList, categoryId, currCategory }
}
}
- 渲染模版
<!-- 弹层 -->
<div class="layer">
<h4>分类推荐 <small>根据您的购买或浏览记录推荐</small></h4>
<ul v-if="currCategory && currCategory.goods && currCategory.goods.length">
<li v-for="item in currCategory.goods" :key="item.id">
<RouterLink to="/">
<img :src="item.picture" alt="">
<div class="info">
<p class="name ellipsis-2">{{item.name}}</p>
<p class="desc ellipsis">{{item.desc}}</p>
<p class="price"><i>¥</i>{{item.price}}</p>
</div>
</RouterLink>
</li>
</ul>
</div>
#14-首页主体-左侧分类-处理品牌
目的: 品牌展示特殊,需要额外获取数据和额外的布局。
大致步骤:
- 定义API接口,在
home-category.vue
组件获取数据。 - 完成基础布局,根据数据进行渲染。
- 处理左侧分类激活显示。
落地代码:
- 定义API接口,在
home-category.vue
组件获取数据。
src/api/home.js
export const findBrand = (limit) => {
return request('/home/brand', 'get', {limit})
}
src/views/home/components/home-category.vue
const brand = reactive({
id: 'brand',
name: '品牌',
children: [{ id: 'brand-children', name: '品牌推荐' }],
+ brands: []
})
+import { findBrand } from '@/api/home.js'
// ... 省略代码
setup () {
// ... 省略代码
// 尽量不要使用async在setup当中使用
+ findBrand().then(data=>{
+ brand.brands = data.result
+ })
return { menuList, categoryId, currCategory }
}
- 进行渲染:
src/views/home/components/home-category.vue
- 布局样式
<ul>
<li class="brand" v-for="i in 6" :key="i">
<RouterLink to="/">
<img src="http://zhoushugang.gitee.io/erabbit-client-pc-static/uploads/brand_goods_1.jpg" alt="">
<div class="info">
<p class="place"><i class="iconfont icon-dingwei"></i>北京</p>
<p class="name ellipsis">DW</p>
<p class="desc ellipsis-2">DW品牌闪购</p>
</div>
</RouterLink>
</li>
</ul>
li.brand {
height: 180px;
a {
align-items: flex-start;
img {
width: 120px;
height: 160px;
}
.info {
p {
margin-top: 8px;
}
.place {
color: #999;
}
}
}
}
- 进行渲染
<!-- 弹层 -->
<div class="layer">
+ <h4 v-if="currCategory">{{currCategory.id==='brand'?'品牌':'分类'}}推荐 <small>根据您的购买或浏览记录推荐</small></h4>
<ul v-if="currCategory && currCategory.goods && currCategory.goods.length">
<li v-for="item in currCategory.goods" :key="item.id">
<RouterLink to="/">
<img :src="item.picture" alt="">
<div class="info">
<p class="name ellipsis-2">{{item.name}}</p>
<p class="desc ellipsis">{{item.desc}}</p>
<p class="price"><i>¥</i>{{item.price}}</p>
</div>
</RouterLink>
</li>
</ul>
+ <ul v-if="currCategory && currCategory.brands && currCategory.brands.length">
+ <li class="brand" v-for="item in currCategory.brands" :key="item.id">
+ <RouterLink to="/">
+ <img :src="item.picture" alt="">
+ <div class="info">
+ <p class="place"><i class="iconfont icon-dingwei"></i>{{item.place}}</p>
+ <p class="name ellipsis">{{item.name}}</p>
+ <p class="desc ellipsis-2">{{item.desc}}</p>
+ </div>
+ </RouterLink>
+ </li>
+ </ul>
</div>
- 处理左侧分类激活显示
src/views/home/components/home-category.vue
- 激活类active
.menu {
li {
padding-left: 40px;
height: 50px;
line-height: 50px;
+ &:hover,&.active {
background: @xtxColor;
}
- 绑定类
<ul class="menu">
+ <li :class="{active:categoryId===item.id}"
- 移除类
+ <div class='home-category' @mouseleave="categoryId=null">
<ul class="menu">
总结: 品牌数据需要请求后台,再汇总到所有数据中,然后渲染,然后激活当前的分类。
#15-首页主体-左侧分类-骨架效果
这种效果一点都不好,我们需要一个过度效果
类似于vant的骨架屏:
目的: 为了在加载的过程中等待效果更好,封装一个骨架屏组件。
大致步骤:
- 需要一个组件,做占位使用。这个占位组件有个专业术语:骨架屏组件。
- 暴露一些属性:高,宽,背景,是否有闪动画。
- 这是一个公用组件,需要全局注册,将来这样的组件建议再vue插件中定义。
- 使用组件完成左侧分类骨架效果。
落的代码:
- 封装组件:
src/components/library/xtx-skeleton.vue
<template>
<div class="xtx-skeleton" :style="{width,height}" :class="{shan:animated}">
<!-- 1 盒子-->
<div class="block" :style="{backgroundColor:bg}"></div>
<!-- 2 闪效果 xtx-skeleton 伪元素 --->
</div>
</template>
<script>
export default {
name: 'XtxSkeleton',
// 使用的时候需要动态设置 高度,宽度,背景颜色,是否闪下
props: {
bg: {
type: String,
default: '#efefef'
},
width: {
type: String,
default: '100px'
},
height: {
type: String,
default: '100px'
},
animated: {
type: Boolean,
default: false
}
}
}
</script>
<style scoped lang="less">
.xtx-skeleton {
display: inline-block;
position: relative;
overflow: hidden;
vertical-align: middle;
.block {
width: 100%;
height: 100%;
border-radius: 2px;
}
}
.shan {
&::after {
content: "";
position: absolute;
animation: shan 1.5s ease 0s infinite;
top: 0;
width: 50%;
height: 100%;
background: linear-gradient(
to left,
rgba(255, 255, 255, 0) 0,
rgba(255, 255, 255, 0.3) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-45deg);
}
}
@keyframes shan {
0% {
left: -100%;
}
100% {
left: 120%;
}
}
</style>
直接使用的代码: 用一次倒一次特别麻烦, 后边使用插件的方法进行优化
- 封装插件:插件定义
src/componets/library/index.js
使用插件src/main.js
什么事插件: 扩展原有功能
// 扩展vue原有的功能:全局组件,自定义指令,挂载原型方法,注意:没有全局过滤器。
// 这就是插件
// vue2.0插件写法要素:导出一个对象,有install函数,默认传入了Vue构造函数,Vue基础之上扩展
// vue3.0插件写法要素:导出一个对象,有install函数,默认传入了app应用实例,app基础之上扩展
import XtxSkeleton from './xtx-skeleton.vue'
export default {
install (app) {
// 在app上进行扩展,app提供 component directive 函数
// 如果要挂载原型 app.config.globalProperties 方式
app.component(XtxSkeleton.name, XtxSkeleton)
}
}
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './mock'
+import ui from './components/library'
import 'normalize.css'
import '@/assets/styles/common.less'
+// 插件的使用,在main.js使用app.use(插件)
+createApp(App).use(store).use(router).use(ui).mount('#app')
- 最后使用组件完成左侧分类骨架效果:
src/views/home/components/home-category.vue
有数据显示数据,没有数据显示骨架 :
<ul class="menu">
<li :class="{active:categoryId===item.id}" v-for="item in menuList" :key="item.id" @mouseenter="categoryId=item.id">
<RouterLink to="/">{{item.name}}</RouterLink>
<template v-if="item.children">
<RouterLink to="/" v-for="sub in item.children" :key="sub.id">{{sub.name}}</RouterLink>
</template>
+ <span v-else>
+ <XtxSkeleton width="60px" height="18px" style="margin-right:5px" bg="rgba(255,255,255,0.2)" />
+ <XtxSkeleton width="50px" height="18px" bg="rgba(255,255,255,0.2)" />
+ </span>
</li>
</ul>
添加渐变的动画:
.xtx-skeleton {
animation: fade 1s linear infinite alternate;
}
@keyframes fade {
from {
opacity: 0.2;
}
to {
opacity: 1;
}
}