vue手机商城项目实战（2）-底部选项卡公共组件实现

本文接上文：vue手机商城项目实战（1）-环境搭建

1、public\index.html我们需要修改下title，根据自己需求定义，我这里修改index.html如下：

2、创建一个自己的favicon.ico，替换掉public下的favicon.ico（可以直接自己百度ico在线制作），在此不再赘述。

程序员导航

优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站

立即访问

在src下新建views目录，在views目录下新建4个模块组件，不过里面具体内容目前都不实现，仅有基本模板，template中写上对应名称，只是为了方便路由导入使用和测试，名称分别为：
[list]首页：Home.vue
分类：Category.vue
购物车：Shopcar.vue
我的：My.vue[/list]

修改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张图标，分别为首页、分类、购物车、我的，图标下载地址如下：
[dltable file=”选项卡素材” size=”2kb”]本地下载[/dltable]

2、在assets目录下新建img目录，我们将这4张图标放入img中。
3、在components中新建名为Footer.vue的文件：

AI 工具导航

优网导航旗下AI工具导航，精选全球千款优质 AI 工具集

立即访问

修改App.vue代码如下：

运行项目测试点击项目底部菜单：