Mobile application based on Vue+mint-ui (2)

This article contains the following content:

• Package import method
• Use mint-ui to develop a home page bottom navigation bar
• vue-routing

In the previous section, we successfully configured the environment and initialized a vue project. Next, we will develop a mobile home page.

1. Introduce dependency packages vuex, axios, mint-ui

1, vuex

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

Vuex is a state management pattern developed specifically for Vue.js applications . It uses a centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable manner. Vuex is also integrated into Vue's official debugging tool  devtools extension (opens new window) , providing advanced debugging functions such as zero-configuration time-travel debugging, state snapshot import and export, etc.

2. Axios is a promise-based HTTP library that can be used in browsers and node.js. This may not be installed for now.

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

3. mint-ui, a vue-based mobile ui component library

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

4、view-router

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

Vue Router is  the official route manager for Vue.js (opens new window) . It is deeply integrated with the core of Vue.js, making it easy to build single-page applications. Included features are:

• Nested routing/view tables
• Modular, component-based routing configuration
• Route parameters, queries, wildcards
• View transition effect based on Vue.js transition system
• Fine-grained navigation control
• Links with auto-activated CSS classes
• HTML5 history mode or hash mode, automatically degraded in IE9
• custom scrollbar behavior

5. Introduce Mint UI

Write the following content in main.js. It should be noted that the style file needs to be imported separately.

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 }
})

2. Modify App.vue and add the navigation control mt-tabbar of mint ui, in which the pictures can be found and replaced by yourself

<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>

At this time, open the browser (refresh if there is no effect) to check and find that it has become our newly added bottom navigation page

 3. Routing settings

So far we have implemented the bottom navigation bar, you can see the switching effect of clicking the bottom, but the content is empty, let's implement clicking to switch pages now

1. Create three new files in the components directory: TakeoutList.vue, OrderList.vue, Personal.vue, with the same content

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

2. Create a new folder router and a file index.js under src. This file may have been created during project initialization. If so, please ignore it. Modify the content of index.js to the following: The path of @/components/takeout/TakeoutList must be consistent with the path in your own directory.

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. Add the following two sentences to mian.js:

 4. Add the following watch to export default in App.vue:

<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>

At this point, the homepage switching effect has been completed