本文接上文：vue手机商城项目实战（1）-环境搭建
1、public\index.html我们需要修改下title，根据自己需求定义，我这里修改index.html如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>子夜商城</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、创建一个自己的favicon.ico，替换掉public下的favicon.ico（可以直接自己百度ico在线制作），在此不再赘述。
在src下新建views目录，在views目录下新建4个模块组件，不过里面具体内容目前都不实现，仅有基本模板，template中写上对应名称，只是为了方便路由导入使用和测试，名称分别为：
- 首页：
Home.vue - 分类：
Category.vue - 购物车：
Shopcar.vue - 我的：
My.vue
修改router目录下index.js的routes路由配置如下：
// 5.2 配置路由对象数组
routes: [
{
name:"Home",
path:"/",
component:()=>import('@/views/Home.vue')
},
{
name:"Category",
path:"/category",
component:()=>import('@/views/Category.vue')
},
{
name:"Shopcar",
path:"/shopcar",
component:()=>import('@/views/Shopcar.vue')
},
{
name:"My",
path:"/my",
component:()=>import('@/views/My.vue')
}
]
1、底部选项卡需要使用图标，因此我们上传4张图标，分别为首页、分类、购物车、我的，图标下载地址如下：
文件下载 | 文件名称：选项卡素材 | 文件大小：2kb |
| 下载声明：本站资源仅供学习和研究使用，不得用于商业用途。如资源不慎侵犯你的版权请联系博主处理！ 本站资源全部采用7z压缩，建议使用360压缩解压，解压密码为www.panziye.com | ||
| 下载地址：本地下载 | ||
2、在assets目录下新建img目录，我们将这4张图标放入img中。
3、在components中新建名为Footer.vue的文件：
<template>
<div id="footer">
<!-- 固定在底部的选项卡 哪个菜单被选中则selected就和菜单id值相同 -->
<mt-tabbar v-model="selected" fixed>
<mt-tab-item id="home">
<img slot="icon" src="../assets/img/home.png">
首页
</mt-tab-item>
<mt-tab-item id="category">
<img slot="icon" src="../assets/img/category.png">
分类
</mt-tab-item>
<mt-tab-item id="shopcar">
<img slot="icon" src="../assets/img/shopcar.png">
购物车
</mt-tab-item>
<mt-tab-item id="my">
<img slot="icon" src="../assets/img/my.png">
我的
</mt-tab-item>
</mt-tabbar>
</div>
</template>
<script>
export default {
data(){
return {
selected:'home'
}
},
watch:{
// 监听selected属性，实现编程式导航页面跳转
selected(){
if(this.selected == 'home'){
this.$router.push({name:"Home"});
}else if(this.selected == 'category'){
this.$router.push({name:"Category"});
}else if(this.selected == 'shopcar'){
this.$router.push({name:"Shopcar"});
}else if(this.selected == 'my'){
this.$router.push({name:"My"});
}
}
}
}
</script>
<style scoped>
</style>
修改App.vue代码如下：
<template>
<div id="app">
<!-- 主体 -->
<router-view></router-view>
<!-- 底部选项卡 -->
<Footer></Footer>
</div>
</template>
<script>
import Footer from './components/Footer.vue'
export default {
name: 'app',
components: {
Footer
}
}
</script>
<style>
/* 清除浏览器对所有元素默认边距 */
* {
padding: 0;
margin: 0;
}
</style>
运行项目测试点击项目底部菜单：
