简介
这是一系列关于如何用Vue编写微商城的项目文档一，适合初学者与已学完Vue基础的读者。教程与vue3.x、vue-cli4，vant-ui等框架，简单易懂。
涉及知识点
- vue项目创建
- vue基础知识
- 组件封装，如导航栏、商品卡片等
- vuex、axios、vue-router的基本使用
- flex布局
- 第三方框架的使用
设置标题
设置页面头部标题，方便告诉用户当前显示的是哪一个页面。编辑src\router.js文件，示例代码如下。
routes: [
{ path: '/', redirect: '/home', meta: { title: '首页' } },
{ path: '/home', component: Home, name: 'home', meta: { title: '首页' } }
]
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
上述代码中，给每个路由添加meta属性的页面title，需要借助router.beforeEach()钩子函数来实现，效果如下图所示。
页面头部
在src\App.vue组件中使用$route.meta.title获取meta数据，如下所示。
<div class="container">
<mt-header fixed :title="$route.meta.title">
</mt-header>
<router-view></router-view>
</div>
执行上述代码后，页面效果如下图所示。
标签页切换
在src\App.vue文件中，添加页面底部标签栏tabbar组件，示例代码如下。
<div class="container">
……（原有代码）
<tabbar></tabbar>
</div>
在JavaScript代码中导入tabbar.vue组件，示例代码如下。
<script>
import tabbar from './components/tabbar.vue'
export default {
components: {
tabbar
}
}
</script>
编写src\components\tabbar.vue文件的HTML结构代码，示例代码如下。
<template>
<nav class="mui-bar mui-bar-tab">
<router-link class="mui-tab-item-lib" :to="{name: 'home'}">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</router-link>
<router-link class="mui-tab-item-lib" :to="{name: 'category'}">
<span class="mui-icon mui-icon-personadd"></span>
<span class="mui-tab-label">分类</span>
</router-link>
<router-link class="mui-tab-item-lib" :to="{name: 'shopcart'}">
<span class="mui-icon mui-icon-extra mui-icon-extra-cart">
<span class="mui-badge">2</span>
</span>
<span class="mui-tab-label">购物车</span>
</router-link>
<router-link class="mui-tab-item-lib" :to="{name: 'user'}">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">我的</span>
</router-link>
</nav>
</template>
在src\router.js文件中将相关路由创建出来，示例代码如下。
import Home from './pages/Home.vue'
import Category from './pages/Category.vue'
import Shopcart from './pages/Shopcart.vue'
import User from './pages/User.vue'
上述代码中，将页面组件存放在src\pages目录（自定义目录），而components目录用来放公共组件（在后面会创建一些公共组件，保存在这个目录下）。
在src\router.js文件中配置路由规则，示例代码如下。
routes: [
{ path: '/', redirect: '/home', meta: { title: '首页' } },
{ path: '/home', component: Home, name: 'home', meta: { title: '首页' } },
{ path: '/category', component: Category, name: 'category', meta: { title: '分类' } },
{ path: '/shopcart', component: Shopcart, name: 'shopcart', meta: { title: '购物车' } },
{ path: '/user', component: User, name: 'user', meta: { title: '我的' } },
],
因为项目中用不到src\components\HelloWorld.vue文件，所以把该文件的相关路由配置删除。
接下来，编写router.js文件中定义好的4个标签页对应的组件文件，测试是否跳转成功。示例代码如下。
创建src\pages\Home.vue文件，示例代码如下
<template>
<div>首页</div>
</template>
创建src\pages\Category.vue文件，示例代码如下。
<template>
<div>分类</div>
</template>
创建src\pages\Shopcart.vue文件，示例代码如下。
<template>
<div>购物车</div>
</template>
创建src\pages\User.vue文件，示例代码如下。
<template>
<div>我的</div>
</template>
以首页面为例，效果图如下。
美化标签栏样式，在src\components\tabbar.vue组件中，编写如下样式代码。
<style scoped>
.mui-bar-tab .mui-tab-item-lib.mui-active {
color: #007aff
}
.mui-bar-tab .mui-tab-item-lib {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.mui-bar-tab .mui-tab-item-lib .mui-icon {
top: 3px;
width: 24px;
height: 24px;
padding-top: 0;
padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item-lib .mui-icon ~ .mui-tab-label {
font-size: 11px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
保存上述代码，页面效果如下图所示。
激活底部标签栏样式，在src\router.js文件中配置linkActiveClass选项，设置底部导航栏选中样式的切换，示例代码如下。
var router = new VueRouter({
routes: [
……（原有代码）
],
linkActiveClass: 'mui-active'
})
底部导航栏选中样式激活后的效果图如下。
激活样式
动画效果
在src\App.vue文件中，当标签页切换的时候，给页面添加动画效果，示例代码如下。
<transition name="fade">
<router-view></router-view>
</transition>
上述代码中，在<router-view>外面加上transition标签，该标签中用来放置需要添加过渡的元素，将name属性设为fade，那么“fade-”就是在过渡中切换的类名前缀。
在<style>标签中添加CSS样式，示例代码如下。
.fade-enter {
opacity: 0;
transform: translateX(100%)
}
.fade-leave-to {
opacity: 0;
transform: translateX(-100%);
position: absolute;
}
.fade-enter-active, .fade-leave-active {
transition:all .5s ease;
}
保存上述代码，测试动画效果。
返回按钮
打开app，通常页面左上角会显示返回箭头，提示用户单击此按钮可以返回上一级页面，首页的左上角不需要显示该返回箭头。
在src\App.vue文件中，通过v-show指令绑定定义变量showBack来判断是否显示“返回”按钮，示例代码如下。
<div class="container">
<mt-header fixed :title="$route.meta.title">
<span slot="left" @click="goBack" v-show="showBack">
<mt-button icon="back">返回</mt-button>
</span>
</mt-header>
</div>
在data中设置showBack的初始值为false，然后使用watch监听路由，如果当前是首页那么隐藏返回按钮，否则显示返回按钮，并在methods中定义goBack()事件实现单击按钮，返回上一级页面。示例代码如下。
export default {
data() {
return {
showBack: false
}
},
created () {
this.showBack = this.$route.path !== '/home'
},
watch: {
'$route.path' (newVal) {
this.showBack = newVal !== '/home'
}
},
methods: {
goBack() {
this.$router.go(-1)
},
},
……（原有代码）
}
保存上述代码，查看返回按钮是否会显示出来，页面效果如下图所示。
返回按钮
本片到此结束了，本篇为微商城的页面布局，下一篇将为首页。