mpvue 开发框架入门教程

mpvue 开发框架入门教程

本文是学习mpvue的入门教程。

mpvue 五分钟上手教程(官方版)

本文是基于这个官方文档,并加入自己的实践,做的学习记录。


学习小结


使用 mpvue 的预备环境:
安装 node.js、npm包管理器
安装 vue-cli (v2.9版本,全局安装)
安装微信web开发者工具


mpvue 创建小程序项目

# 创建一个基于 mpvue-quickstart 模板的新项目
创建项目,执行命令:
vue init mpvue/mpvue-quickstart my-project

安装依赖,运行项目:
$ cd my-project
$ npm install
$ npm run dev


一定要执行了这些命令之后,再把项目导入到 微信web开发者工具。
否则,项目导入到微信开发工具中,你可能遇到这样的错误:
未找到入口 app.json 文件,或者文件读取失败,请检查后重新编译。
(anonymous) @ VM94:2


把项目导入到微信开发工具中
项目目录,选择 上面的my-project,而不是 dist 文件夹。
导入后,小程序就能开发工具中运行起来了,你能看到官方的demo的运行效果了。

一切都好了,小程序开发终于就可以像vue js 项目一样的方式开发了。
如果没有 mpvue 这样的框架,小程序每次修改数据,都需要 setData() 真的很烦。