使用mpvue开发微信小程序（项目实战）

微信小程序开发

微信小程序官方文档参考
https://developers.weixin.qq.com/miniprogram/dev/index.html?t=19030416

前端框架

mpvue + weui wxss + vant weapp

1. mpvue：由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序环境本身的原因而不能使用），与原生开发小程序结合使用。
2. weui wxss：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
3. vant weapp:小程序已经提供了很多组件和 API，但它们过于基础，实际开发时仍需要一定的封装和 UI 调整。在本项目中，主要是以weui wxss为主，vantweapp为辅。

mpvue的特性

使用mpvue来开发小程序相对于原生写法的好处，除了vue的语法习惯，另外你将在小程序技术体系的基础上获取到这样一些能力：

1. 彻底的组件化开发能力：提高代码复用性
2. 完整的 Vue.js 开发体验
3. 方便的 Vuex 数据管理方案：方便构建复杂应用
4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
5. 支持使用 npm 外部依赖
6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
7. H5 代码转换编译成小程序目标代码的能力

mpvue框架原理

1. mpvue 保留了 vue.runtime核心方法，无缝继承了 Vue.js 的基础能力
2. mpvue-template-compiler 提供了将 vue 的模板语法转换到小程序的 wxml 语法的能力
3. 修改了 vue 的建构配置，使之构建出符合小程序项目结构的代码格式： json/wxml/wxss/js 文件

前期准备

1. 申请账号：通过 https://mp.weixin.qq.com/wxopen/waregister?action=step1 的指引完成，注册个人或者企业单位的小程序。
2. 获取小程序的AppID：登录 https://mp.weixin.qq.com ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
3. 安装微信开发者工具：前往 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=19030416 ，根据自己的操作系统下载对应的安装包进行安装。

开发环境和工具

1. node.js安装：https://nodejs.org/en/download/
   验证安装是否成功

   	node --version
   	// 成功的话输出类似：v10.6.0
   	npm --version
   	// 成功的话输出类似：6.1.0
   

   将npm的下载源切换到国内淘宝的镜像，以提高下载时的速度和成功率

   	npm set registry https://registry.npm.taobao.org/
   

2. vue-cli脚手架
   vue-cli是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令：

   	// 全局安装 vue-cli
   	npm install vue-cli -g
   

   可以输入命令来验证是否安装成功

   	vue
   

3. 编辑器vscode
   下载地址：https://code.visualstudio.com

创建第一个mpvue小程序

在以上开发环境模块中，已经搭建好了vue-cli脚手架，接下来是进行配置、初始化和安装依赖包。
打开vscode编辑器，在终端面板执行以下命令：

	// 创建一个基于 mpvue-quickstart 模板的新项目
	$ vue init mpvue/mpvue-quickstart my-project
	
	// 进入文件目录，安装依赖
	$ cd my-project
	$ npm install
	// 启动构建
	$ npm run dev

运行my-project项目后，源代码发生改变就会触发自动编译，并且生成一个dist文件夹。

接下来，你只需要启动微信开发者工具，引入项目的dist文件夹和输入自己小程序的AppId即可预览到你的第一个 mpvue 小程序。
在微信开发者工具的菜单》设置 》编辑设置 中，将“保存时自动编译小程序”勾选上，为了让mpvue的代码自动编译完成后，模拟器会自动刷新界面。