初始化一个 mpvue 项目
$ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因，可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 一般是要 sudo 权限的 $ npm install --global vue-cli@2.9 # 4. 创建一个基于 mpvue-quickstart 模板的新项目 # 新手一路回车选择默认就可以了 $ vue init mpvue/mpvue-quickstart my-project # 5. 安装依赖，走你 $ cd my-project $ npm install $ npm run dev分包机制 2018.7.23+ mpvue-loader 1.1.2-rc.2 之后，优化了 build 后的文件生成结构
webpack 配置 注意事项 新增的页面需要重新 npm run dev 来进行编译
使用手册 mpvue 继承自 Vue.js，其技术规范和语法特点与 Vue.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框架原理 mpvue 保留了 vue.runtime 核心方法，无缝继承了 Vue.js 的基础能力 mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力 修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件
beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed
app 部分：
onLaunch，初始化 onShow，当小程序启动，或从后台进入前台显示 onHide，当小程序从前台进入后台 page 部分：
onLoad，监听页面加载 onShow，监听页面显示 onReady，监听页面初次渲染完成 onHide，监听页面隐藏 onUnload，监听页面卸载 onPullDownRefresh，监听用户下拉动作 onReachBottom，页面上拉触底事件的处理函数 onShareAppMessage，用户点击右上角分享 onPageScroll，页面滚动 onTabItemTap, 当前是 tab 页时，点击 tab 时触发
生命周期图示
事件处理器
// 事件映射表，左侧为 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' }表单控件绑定
<template> <div> <picker @change="bindPickerChange" :value="index" :range="array"> <view class="picker"> 当前选择：{{array[index]}} </view> </picker> </div> </template> <script> export default { data () { return { index: 0, array: ['A', 'B', 'C'] } }, methods: { bindPickerChange (e) { console.log(e) } } } </script> <template> <div> <radio-group class="radio-group" @change="radioChange"> <label class="radio" v-for="(item, index) in items" :key="item.name"> <radio :value="item.name" :checked="item.checked"/> {{item.value}} </label> </radio-group> </div> </template> <script> export default { data () { return { items: [ {name: 'USA', value: '美国'}, {name: 'CHN', value: '中国', checked: 'true'}, {name: 'BRA', value: '巴西'}, {name: 'JPN', value: '日本'}, {name: 'ENG', value: '英国'}, {name: 'TUR', value: '法国'} ] } }, methods: { radioChange (e) { console.log('radio发生change事件，携带value值为：', e.target.value) } } } </script>吹逼交流群：711613774
程序员哆啦A梦 认证博客专家 博客专家 简书万粉优秀创作 掘金优秀作者 我是程序员哆啦A梦，蓝胖子，简书万粉优秀创作者，掘金优秀作者、博客专家，云+社区社区活跃作者，致力于打造一系列能够帮助程序员提高的优质文章。网站@http://www.dadaqianduan.cn