Vue购物商城项目(一)

Vue购物商城项目

---

前言

1.这里面包含了大量的、我的个人理解与看法;

2.这是一个购物商城项目,目前阶段牵扯到路由, 插槽, axios数据请求, 数据存储与使用;

3.这篇只牵扯路由配置, 组件插槽;

4.现在这个项目已经完成了一小部分,不过我还是打算把前面写的文件都记录一遍;

---

一、Cli4生成项目

略略略;
使用Vue-cli4.5x快速搭建项目
头铁,全用最新版了;

插件	版本
Vue	^3.0.0
vue-router	^4.0.0-0
axios	^0.21.1
css-loader	^3.6.0
style-loader	^1.1.3

文章阶段性同步, 插件部分目前就用到了这些;

二、路由配置

我想了一下,还是决定返回来先把路由写上,因为TabBarItem需要用到路由来判断高亮显示与否;

//这是在index.js里;
import {
    createRouter, createWebHistory } from 'vue-router'
//cli4真的就只需要引入这俩了;
const routes = [
  {
   
    path: '/',
    name: 'home',
    component: () => import('../views/home/Home.vue')
  },
  {
   
    path: '/classify',
    name: 'classify',
    component: () => import('../views/classify/classify.vue')
  },
  {
   
    path: '/shoppingcar',
    name: 'shoppingcar',
    component: () => import('../views/shoppingcar/shoppingcar.vue')
  },
  {
   
    path: '/my',
    name: 'my',
    component: () => import('../views/my/my.vue')
  }
]
/*我们一共有四个页面,需要四条路由; */
const router = createRouter({
   
  history: createWebHistory(process.env.BASE_URL),
  routes
  /* 
  把路由表(就是上面的那个装着对象的数组)放在这里,
  在下面一起导出,供组件使用 
 */
})

export default router
/* 导出路由表 */

Cli4.x路由配置详解

三、tabBar制作

我想你可能见过那种固定定位,不会随着页面滚动的底部横条?
这部分共包括三个组件;

1. TabBar
2. TabBarItem
3. MainTabBar

TabBar和TabBarItem有插槽关系,TabBar有一个插槽, 在MainTabBar处可以传入所有的(4个)TabBarItem;

每个TabBarItem有三个插槽,在MainTabBar处可以传入各个TabBarItem的内容;

我们先看TabBar和TabBarItem, 封装完这两个我们才能封装MainTabBar;

---

1.TabBar组件

TabBar只有一个插槽和一些样式,这个插槽需要被传入四个TabBarItem(四个底部栏选项);

//这是在src/components/common/tabbar/TabBar.vue里;
<template>
  <div id="tab-bar">
    <slot></slot>//插槽;
  </div>
</template>

<script>
<