MPVue 快速框架上手

MPVue 介绍

mpvue 是一个使用 Vue.js 来开发小程序的前端框架。通过修改 Vue.js 的 runtime 和 compiler 实现，使代码可以运行在小程序环境中。

快速上手

1. 运行环境 Node.js

请访问 Node.js 官网 http://nodejs.org/ ，参考官网的文档进行安装。（Node.js 就是 Chrome 浏览器的 V8 JavaScript 引擎。）

# 安装之后，运行以下命令
node -v

2. 查看 npm 版本

npm 全称 Node Package Manager，是一个包管理工具。可以用它下载安装各种依赖包。

npm -v

3. 切换网络下载源为 taobao 源。（非必须步骤）

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

4. 安装 vue-cli

vue-cli （command-line interface） 就是一个项目管理工具，可以使用它方便的创建项目的模板。

npm install --global vue-cli@2.9
# 可以使用以下命令查看你通过 npm 安装的所有工具
npm list -g --depth 0

5. 现在可以使用 vue-cli 创建 mpvue 项目的模板了

vue init mpvue/mpvue-quickstart my-miniprogram
# 后面，会出现很多的提示，让你来进行设置，设置内容如下：
# 提示：? Project name (my-miniprogram)  --> 直接回车
# 提示：? wxmp appid (touristappid)      --> 输入你自己的 appid （微信小程序号的appID），回车
# 提示：? Project description (A Mpvue project)  --> 输入项目描述。（例如：v1.0.0）， 回车
# 提示：? Author (Your Name <you@example.com>)   --> 输入你的邮箱，回车
# 后面的配置，一路回车，不用填写。

cd my-miniprogram
npm install   # 这个命令是安装项目中的所有依赖包，具体依赖的是什么模板中已声明。
npm run dev
# 等待出现以下提示信息：DONE  Compiled successfully in xxxxms xxxx(时间)

现在，vue 的代码是运行起来了，但还需要通过小程序的方式来显示，因此，还需要下载微信开发者工具。

搭建小程序的环境

1. 下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2. 微信扫码登陆开发者工具

在应用列表中查找 “微信开发者工具”， 双击运行后如下图所示。微信扫码登陆即可。

3. 添加小程序项目

点击右侧的加号，如下图所示，然后导入（import）刚才创建的 mpvue 项目。

4. 现在可以查看（预览）你的小程序了

点击 “编译（compile）” 按钮即可。

参考：http://mpvue.com/