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

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

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

基本情况

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

底部导航栏

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

进度展示

功能特点

单页面组件的设计（Foot.vue，存放中components目录下）

进度流程组件

列表组件

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