Vue 微商城项目（一）

简介

这是一系列关于如何用Vue编写微商城的项目文档一，适合初学者与已学完Vue基础的读者。教程与vue3.x、vue-cli4，vant-ui等框架，简单易懂。

涉及知识点

1. vue项目创建
2. vue基础知识
3. 组件封装，如导航栏、商品卡片等
4. vuex、axios、vue-router的基本使用
5. flex布局
6. 第三方框架的使用

设置标题

设置页面头部标题，方便告诉用户当前显示的是哪一个页面。编辑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="