一、快速搭建基础项目
官方网站中已经对这一步做了很详细的介绍，所以这里就简单的描述下。
# 1. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli
# 2. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 3. 安装依赖
$ cd my-project
$ npm install
$ npm run dev
详细请访问mpvue官方网站
1、搭建小程序开发环境
小程序的开发需要配合微信专门的开发工具，当然这一步也是比较简单的，将开发工具下载后按照提示进行安装即可。
安装完毕以后，基本的小程序开发环境就已经准备完毕啦，在开发工具中将上一步创建的项目拉入就可以预览基础的demo啦。
二、项目的开发目录
src 是开发目录
- main.js中的配置文件会打包成小程序的app.json配置文件，所以可以在这里进行配置相应的信息，例如：配置导航栏
export default {
config: {
// 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，
我们会自动把 webpack entry 里面的入口页面加进去
pages: ['pages/logs/main', '^pages/index/main'],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#61A2F3',
navigationBarTitleText: '小程序',
navigationBarTextStyle: '#FFF'
},
}
}
- pages 中 的main.js也是配置文件。例如
export default { // 比如这里修改顶部的导航栏展示信息
config: {
navigationBarTitleText: '小程序'
}
}
注：本地 images 需要放到 static 文件夹下 ，会自动打包到dist内，图片路径的要用dist 内的图片路径才能正常显示。（解决方式并不唯一）
三、网络请求
在Vue中本人经常用的是axios，不过mpvue虽然是继承于Vue，但是这里没办法直接使用axios的。网上有推荐使用flyio。不过相比来说我觉得使用小程序官方的api会更舒服一点。mpvue框架搭配小程序的api，在mpvue中还能直接使用小程序中的组件，对像我这样的新手来说真的是很友好啦。
flyio中也给出了在小程序环境下的基础配置。详细的可以去官网查看。
后来觉得小程序原生的api更适合，不过还是用了一下flyio，列一下我的使用方式。(虽然有凑字数的嫌疑)
// 1. 新建文件 request.js
// 为了适应小程序
var Fly=require("flyio/dist/npm/wx") //npm引入方式
const request = new Fly();
// 可以进行拦截器、全局config等等设置
//添加拦截器
request.interceptors.request.use((config,promise)=>{
//给所有请求添加自定义header
config.headers["X-Tag"]="flyio";
return config;
})
fly.config.baseURL="url" // 基础url配置
export default request;
// 2、在需要使用请求的地方，引入request
import fly from './../../request.js' // 这里的路径根据自己创建的文件修改
// 简单使用
fly.get("url", {
params: {} // 查询条件
}).then(response => {
// 根据返回结果进行数据操作
});
四、mpvue中使用小程序原生组件
比如switch组件 在小程序中对switch的描述
在mpvue中也可以直接使用，不过要注意事件绑定，要转换为mpvue中的事件绑定方式。
mpvue和小程序事件绑定的映射表
// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}
对应的小程序中展示的 event.detail 在mpvue中可以在控制台输出看到
诺，就是标红的那个部分， 然后就可以愉快的使用小程序的原生组件啦。
五、生命周期
vue中生命周期就是很重要的知识点，这里也同样。因为是小程序框架所以在vue生命周期的基础上mpvvue也兼容了小程序的生命周期。
这个知识点不是很清晰所以就不多说那么多了
附：小程序生命周期
app 部分：
onLaunch，初始化
onShow，当小程序启动，或从后台进入前台显示
onHide，当小程序从前台进入后台
page 部分：
onLoad，监听页面加载
onShow，监听页面显示
onReady，监听页面初次渲染完成
onHide，监听页面隐藏
onUnload，监听页面卸载
onPullDownRefresh，监听用户下拉动作
onReachBottom，页面上拉触底事件的处理函数
onShareAppMessage，用户点击右上角分享
onPageScroll，页面滚动
onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）
详细内容请访问官方网站哦。
