移动页面示例项目：vue-mobile-demo

今天把这两天做的Demo上传到github上，生成了一个示例项目：vue-mobile-demo，希望能够对新手有所帮助。

下面就简单介绍一下这个项目的内容

基本情况

该项目基于vant-demo项目，增加了许多实用功能，涉及到了vue+vant+axios+mockjs等，是新手开发的良好起点。包括了首页/申请/查询/设置四个页面，由底部导航栏进行切换。

底部导航栏

其中申请页面又包括了四个阶段，由一个主控页面加四个组件构成

进度展示

功能特点

单页面组件的设计（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>申请</van-tabbar-item>
      <van-tabbar-item icon="search" to="search">查询</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="user" info="5">设置</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>

进度流程组件

<template>
    <div class="info">
        <div class="fixed">
        <van-steps :active="active">
            <van-step>填写信息</van-step>
            <van-step>智能匹配</van-step>
            <van-step>产品申请</van-step>
            <van-step>反馈结果</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请求

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

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

跨域请求代理

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

更多内容请参考github项目：https://github.com/SagittariusZhu/vue-mobile-demo