今天把這兩天做的Demo上傳到github上，生成了一個(gè)示例項(xiàng)目：vue-mobile-demo，希望能夠?qū)π率钟兴鶐椭?/p>

下面就簡(jiǎn)單介紹一下這個(gè)項(xiàng)目的內(nèi)容

基本情況

該項(xiàng)目基于vant-demo項(xiàng)目，增加了許多實(shí)用功能，涉及到了vue+vant+axios+mockjs等，是新手開發(fā)的良好起點(diǎn)。包括了首頁/申請(qǐng)/查詢/設(shè)置四個(gè)頁面，由底部導(dǎo)航欄進(jìn)行切換。

底部導(dǎo)航欄

其中申請(qǐng)頁面又包括了四個(gè)階段，由一個(gè)主控頁面加四個(gè)組件構(gòu)成

進(jìn)度展示

功能特點(diǎn)

單頁面組件的設(shè)計(jì)（Foot.vue，存放中components目錄下）

<template>
  <div class="footer">
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="home">首頁</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="info" dot>申請(qǐng)</van-tabbar-item>
      <van-tabbar-item icon="search" to="search">查詢</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="user" info="5">設(shè)置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
    name: 'apo-foot',
    components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem
    },
    data () {
      return {
        active: 0
      }
    }
}
</script>

進(jìn)度流程組件

<template>
    <div class="info">
        <div class="fixed">
        <van-steps :active="active">
            <van-step>填寫信息</van-step>
            <van-step>智能匹配</van-step>
            <van-step>產(chǎn)品申請(qǐng)</van-step>
            <van-step>反饋結(jié)果</van-step>
        </van-steps>
    </div>
    <div class="step-mask"></div>
    <div :is="currentView"></div>   
    <div class="van-hairline--top"></div>
    <van-row>
        <van-col offset="6" span="12">
            <van-button 
                type="primary" 
                size="large" 
                :text="buttonTip"
                @click="nextStep"
            ></van-button>
        </van-col>
    </van-row>
    </div>
</template>

列表組件

<template>
  <div class="products">
    <van-radio-group v-model="radio">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="沒有更多了"
      @load="onLoad">
      <van-radio 
        v-for="item in list"
        :key="item.id"
        :name="item.id" >
          <apo-cell
            :newsData="item"
            :key="item.id" />
      </van-radio>
    </van-list>
    </van-radio-group>
  </div>
</template>

Mock請(qǐng)求

const Mock = require('mockjs');
const Random = Mock.Random;

const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 10; i++) {
        let newArticleObject = {
            id: i,
            title: Random.csentence(5, 30),
            thumbnail_pic_s: Random.dataImage('300x250', 'mock picture'),
            author_name: Random.cname(),
            date: Random.date() + ' ' + Random.time()
        }
        articles.push(newArticleObject)
    }
 
    return {
        articles: articles
    }
}
 
Mock.mock('/news/index', 'post', produceNewsData);

Axios請(qǐng)求

import axios from 'axios'
import vue from 'vue'
 
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
 
axios.interceptors.request.use(function(config) {
    return config;
  }, function(error) {
    return Promise.reject(error);
  })

axios.interceptors.response.use(function(response) {
  return response;
}, function(error) {
  return Promise.reject(error);
})
 
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}
 
export default {
  getNews(url, params) {
    return fetch(url, params);
  }
}

跨域請(qǐng)求代理

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 8080,
   https: false,
   hotOnly: false,
   proxy: 'proxy_url'
}

更多內(nèi)容請(qǐng)參考github項(xiàng)目：https://github.com/SagittariusZhu/vue-mobile-demo