本篇包含以下内容：

• 包引入方法
• 使用mint-ui开发一个首页底部导航栏
• vue 路由

上节我们成功配置了环境并初始化一个vue项目，下面我们开发一个移动端首页。

一、引入依赖包vuex、axios、mint-ui

1、vuex

npm install vuex --registry=https://registry.npmmirror.com

2、Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。这个可暂时不用安装。

npm install axios --registry=https://registry.npmmirror.com

3、mint-ui，一个基于vue的移动端ui组件库

npm install mint-ui --registry=https://registry.npmmirror.com

4、vue-router

npm install vue-router --registry=https://registry.npmmirror.com

5、引入 Mint UI

在 main.js 中写入以下内容，需要注意的是，样式文件需要单独引入。

import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
import App from './App.vue'

Vue.use(MintUI)

new Vue({
  el: '#app',
  components: { App }
})

二、修改App.vue，加入mint ui的导航控件mt-tabbar，其中图片可以自己找一找替换

<template>
  <div id="app">
    <router-view/>
    <mt-tabbar
      v-model="selected"
      fixed
    >
      <mt-tab-item id="外卖">
        <img slot="icon" src="./assets/waimai.png">
        外卖
      </mt-tab-item>
      <mt-tab-item id="订单">
        <img slot="icon" src="./assets/dingdan.png">
        订单
      </mt-tab-item>
      <mt-tab-item id="我的">
        <img slot="icon" src="./assets/wode.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      selected: '外卖'
    }
  }
}
</script>

此时打开浏览器（没效果可刷新）查看发现已经变成我们新加入的底部导航页面了

 三、路由设置

目前为止我们实现了底部导航栏，可看到点击底部切换效果，但内容空空，我们现在来实现一下点击切换页面

1、在components目录下新建三个文件：TakeoutList.vue、OrderList.vue、Personal.vue,内容一样

<template>
  <div>
      <span style="color: red">外卖</span>
  </div>
</template>

2、src下新建文件夹router和文件index.js，此文件有可能会在项目初始化中已经建好了，如果有请忽略。把index.js内容修改为以下内容：其中@/components/takeout/TakeoutList路径要和自己目录中路径一致。

import Vue from "vue"
import Router from 'vue-router'

import TakeoutList from '@/components/takeout/TakeoutList'
import OrderList from '@/components/order/OrderList'
import Personal from '@/components/my/Personal'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/takeout/list',
            name: 'TakeoutList',
            component: TakeoutList,
            alias: '/'
          },
          {
            path: '/order/list',
            name: 'OrderList',
            component: OrderList
          },
          {
            path: '/my/personal',
            name: 'Personal',
            component: Personal
          }
    ]
})

3、mian.js中加入以下两句：

 4、App.vue中export default中加入以下watch:

<script>

export default {
  name: 'App',
  data () {
    return {
      selected: 'takeout'
    }
  },
  watch: {
    'selected': {
      handler () {
        console.log(this.selected)
        if (this.selected === 'takeout') {
          this.$router.push({
            name: 'TakeoutList'
          })
        } else if (this.selected === 'order') {
          this.$router.push({
            name: 'OrderList'
          })
        } else if (this.selected === 'my') {
          this.$router.push({
            name: 'Personal'
          })
        }
      }
    }
  }
}
</script>

至此首页切换效果已完成