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/

未经允许不得转载:大自然的搬运工 » MPVue 快速框架上手

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址