基于Vue+mint-ui的移动应用（二）

2023-11-16 15:48:10

本篇包含以下内容：

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

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

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

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

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

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

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

嵌套的路由/视图表

模块化的、基于组件的路由配置

路由参数、查询、通配符

基于 Vue.js 过渡系统的视图过渡效果

细粒度的导航控制

带有自动激活的 CSS class 的链接

HTML5 历史模式或 hash 模式，在 IE9 中自动降级

自定义的滚动条行为

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>

至此首页切换效果已完成

码农公寓

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

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

三、路由设置

相关文章