今天把这两天做的 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
来源: http://www.jianshu.com/p/789a6a3c3a63