mpvue初体验-用vue开发小程序

写在前面

昨天晚上刚刚开源的mpvue引起了不少前端er们的注意，下图是一个简单的对比（感谢 @胡成全 为本文提供的对比图）。

话不多说，我们现在感受一下如何使用mpvue开发小程序。(以下内容参照mpvue文档完成)

开发环境

* node

* npm：这里建议安装淘宝镜像

* 微信开发者工具：下载地址

操作顺序

首先下载vue-cli

npm install -g vue-cli

使用vue-cli创建一个mpvue项目

vue init mpvue/mpvue-quickstart my-project

创建的过程中会有一些设置，包括项目名称，作者等等内容，一路回车到底就行。

然后我们进入到项目目录，安装项目依赖

cd my-project
npm install

最后，运行走起~

npm run dev

这时候项目就跑起来了，当前项目的目录结构如下所示：

有vue开发经验的朋友对这个目录肯定不会陌生了，这里就不多说了。

接下来我们要使用微信开发者工具运行这个小程序。

在微信开发者工具中新建项目

其中项目目录选择vue项目中的dist目录。

appID填写自己小程序的appID，没有的话可以点选体验“小程序”，只影响是否可以真机调试。

最后点击【确定】按钮，就可以看到实例代码的效果了，我们也可以扫码在真机中调试。

大家可以看到，这是官方为我们提供的一个计数器的效果，点击+，数字会加1，点击-，数字会减1。我们可以在此基础上简单地修改代码。

我们修改src>page>count>store.js中的数值，就能改变计数器添加和减少的数量，修改完成之后，直接保存，项目会自动编译，然后我们就可以在微信开发者工具中查看小程序的效果了。

写在最后

我并不是一个小程序开发者，但是我能感受到腾讯对小程序的投入和重视越来越大，各大公司对小程序的动作也越来越多，我想2018年小程序绝对不会像2017年那样平淡。

资料分享

关注微信公众号：【晓舟报告】，回复关键字，获取海量学习资料。

• 【python】：获取python教学视频和案例源码
• 【java】：获取java教学视频和案例源码
• 【node】：获取node教学视频和案例源码
• 【前端】：获取前端教学视频和案例源码

如果感觉对您有帮助，千万不要吝惜一个小小的【赞】