本文接上文: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>