mpvue + vuex搭建小程序详细教程

源码

mpvue-vuex-demo

构成

1、采用mpvue 官方脚手架搭建项目底层结构
2、采用Fly.js 作为http请求库
3、引入mpvue-router-patach，以便在mpvue小程序中能使用vue-router的写法

当当当当！mpvue2更新啦，感动，我爱vue(雾)
为了庆祝一波，作者决定近期进行2.0版本的mpvue-vuex-demo的开发，预计将有以下改动：

1. 适配最新的mpvue等所有依赖版本~~
2. 大幅优化api部分的代码封装，使其更接近真实的生成环境，解决api权限和封装代码臃肿丑陋的问题。个人认为，对前端新人来说，会是一个很好学习和增强代码能力的体验
3. 下下版本更新计划：增加分支，新增自定义navgation（更个性）、自定义tabbar的功能（个性化+伪tabbar热更新）
4. 待补充…欢迎issue提建议意见

咳咳，因在下时间不足及对mpvue开发团队莫得信心，这个级就先不升了，就是这么任性
建议要做小程序多端开发的同学使用taro，不做多端使用原生小程序

目录结构

├── src // 我们的项目的源码编写文件
│ ├── components // 组件目录
│ ├── common //静态资源
│ │ └── font // iconfont图标
│ │ └── img // 图片
│ │ └── js // js
│ │ │└──  mixins.js // js
│ │ │└──  tips.js // js
│ │ │└──  utils.js // js
│ │ └── scss // scss样式
│ │ │└──  base.scss // 自定义样式
│ │ │└──  icon.scss // iconfont图标
│ │ │└──  index.scss // 基础汇总
│ │ │└──  mixin.scss // 混合等工具样式
│ │ │└──  reset.scss // 初始化样式
│ │ │└──  variable.scss // 全局主题色样式
│ ├── http //http请求配置文件
│ │ └── api // 接口调用文件
│ │ └── config //fly 配置文件
│ ├── pages //项目页面目录
│ ├── components //项目复用组件目录
│ ├── store //状态管理 vuex配置目录
│ │ └── actions.js //actions异步修改状态
│ │ └── getters.js //getters计算过滤操作
│ │ └── mutation-types.js //mutations 类型
│ │ └── mutations.js //修改状态
│ │ └── index.js //我们组装模块并导出 store 的地方
│ │ └── state.js //数据源定义
│ ├── untils //工具函数目录
│ │ └── index.js
│ ├── App.vue // APP入口文件
│ ├── main.js // 主配置文件
│ ├── config.js // host等配置

快速创建一个mpvue项目

# 全局安装 vue-cli
$ npm install -g vue-cli
 
# 创建一个基于 mpvue-quickstart 模板的新项目，记得选择安装vuex
$ vue init mpvue/mpvue-quickstart mpvue-demo
 
# 安装fly
$ npm i flyio --save
 
# 安装依赖
$ cd mpvue-demo
$ npm i
# 启动构建
$ npm run dev

配置fly

1、配置公共设置
src/http/config.js

/*
    fly配置文件
    by:David 2018.6.14
*/
//引入 fly
var Fly = require("flyio/dist/npm/wx")
var fly = new Fly;
import config from '@/config'
//配置请求基地址
// //定义公共headers
// fly.config.headers={xx:5,bb:6,dd:7}
// //设置超时
fly.config.timeout = 20000;
// //设置请求基地址
fly.config.baseURL = config.host

//添加请求拦截器
fly.interceptors.request.use((request) => {
   
    //给所有请求添加自定义header
    request.headers["X-Tag"