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

今天把这两天做的Demo上传到github上，生成了一个示例项目：vue-mobile-demo，希望能够对新手有所帮助。
下面就简单介绍一下这个项目的内容
基本情况该项目基于vant-demo项目，增加了许多实用功能，涉及到了vue+vant+axios+mockjs等，是新手开发的良好起点。包括了首页/申请/查询/设置四个页面，由底部导航栏进行切换。

文章图片
底部导航栏其中申请页面又包括了四个阶段，由一个主控页面加四个组件构成

文章图片
进度展示功能特点单页面组件的设计（Foot.vue，存放中components目录下）

【移动页面示例项目（vue-mobile-demo）】进度流程组件

列表组件

Mock请求

const Mock = require('mockjs'); const Random = Mock.Random; const produceNewsData = https://www.it610.com/article/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); } }

跨域请求代理