mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架，按官网说可以达到小程序与H5界面使用一套代码。使用此框架，开发者将得到完整的 Vue.js 开发体验，同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序，或开发小程序后希望将其转换为 H5，mpvue 将是十分契合的一种解决方案。
Mpvue官网：
demo地址 ：https://github.com/ccwyn/mpvuedemo/tree/master/my-project
为什么要用mpvue
首先微信小程序推荐简洁的开发方式，通过多页面聚合完成轻量的产品功能。小程序以离线包方式下载到本地，通过微信客户端载入和启动，开发规范简洁，技术封装彻底，自成开发体系，本身定位为一个简单的逻辑视图层框架，官方并不推荐用来开发复杂应用，但业务需求却难以做到精简。复杂的应用对开发方式有较高的要求，如组件和模块化、自动构建和集成、代码复用和开发效率等，但小程序开发规范较大的限制了这部分能力。所以为了解决上述问题，提高开发效率，提供更好的开发体验，通过使用基于 Vue.js 的mpvue框架来开发微信小程序。
mpvue的特点
彻底的组件化开发能力：提高代码
完整的 Vue.js 开发体验
方便的 Vuex 数据管理方案：方便构建复杂应用
快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具 vue-cli 快速初始化项目
H5 代码转换编译成小程序目标代码的能力
项目搭建
项目构成
1、采用mpvue 官方脚手架搭建项目底层结构
2、采用Fly.js 作为http 请求库
3、采用stylus作为项目css预处理工具。
项目框架结构和文件目录结构
主要关注应用程序代码所在的src目录
├── src // 我们的项目的源码编写文件 │ ├── components // 组件目录 │ │ └── head //导航组件 │ ├── config //公共配置 │ │ └── tips // 提示与加载工具类 │ ├── http //http请求配置文件 │ │ └── api // 接口调用文件 │ │ └── config //fly 配置文件 │ ├── pages //项目页面目录 │ ├── store //状态管理 vuex配置目录 │ │ └── actions.js //actions异步修改状态 │ │ └── getters.js //getters计算过滤操作 │ │ └── mutation-types.js //mutations 类型 │ │ └── mutations.js //修改状态 │ │ └── index.js //我们组装模块并导出 store 的地方 │ │ └── state.js //数据源定义 │ ├── stylus //stylus css处理器目录 │ │ └── common.styl // 全局css样式 │ │ └── index.styl // stylus 出口 │ │ └── mixin.styl //mixin 方法 │ │ └── reset.styl //reset css │ ├── untils //工具函数目录 │ │ └── index.js │ ├── App.vue // APP入口文件 │ ├── main.js // 主配置文件
搭建过程
# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $ npm run dev
二、微信开发者工具打开dist目录，查看页面是否显示。
三、配置 fly
# npm安装 flyio $ npm install flyio --save
1、在src下 创建 http目录 目录结构为：
│ ├── http //http请求配置文件 │ │ └── api.js // 接口调用文件 │ │ └── config.js //fly 配置文件
2、config.js
//引入 fly var Fly=require("flyio/dist/npm/wx") var fly=new Fly; //配置请求基地址 // //定义公共headers // fly.config.headers={xx:5,bb:6,dd:7} // //设置超时 // fly.config.timeout=10000; // //设置请求基地址 // fly.config.baseURL="https://wendux.github.io/" //添加拦截器 fly.interceptors.request.use((config,promise)=>{ //给所有请求添加自定义header config.headers["X-Tag"]="flyio"; return config; }) // Vue.prototype.$http=fly //将fly实例挂在vue原型上 export default fly
3、api.js
import fly from './config' import qs from 'qs' // 配置API接口地址 let root ='接口域名'; /** * 接口模版====post * * export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))}; * * 接口模版====get * * export const test1 = function(){return fly.get(`${root}/api/getNewsList`)} * * * 用法： * 在 页面用引入 test * import {test} from '../../http/api.js' * * test(params).then(res=>{ console.log(res) }) */ export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))};
四、配置 stylus
# npm安装 flyio $ npm install stylus --save-dev $ npm install stylus-loader --save-dev
1、在src下 创建 stylus目录 目录结构为：