写在前面
昨天晚上刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比(感谢
@胡成全
为本文提供的对比图)。
![](https://pic2.zhimg.com/80/v2-77cfe5b8546ed08de99b7d141106c034_hd.jpg)
话不多说,我们现在感受一下如何使用mpvue开发小程序。(以下内容参照mpvue文档完成)
开发环境
* node
* npm:这里建议安装淘宝镜像
* 微信开发者工具:下载地址
操作顺序
首先下载vue-cli
npm install -g vue-cli
使用vue-cli创建一个mpvue项目
vue init mpvue/mpvue-quickstart my-project
![](https://pic2.zhimg.com/80/v2-02807433e1735533bf8eaeada0405954_hd.jpg)
创建的过程中会有一些设置,包括项目名称,作者等等内容,一路回车到底就行。
然后我们进入到项目目录,安装项目依赖
cd my-project
npm install
![](https://pic3.zhimg.com/80/v2-66ec0e54541272cdbd481db5c275f9aa_hd.jpg)
最后,运行走起~
扫描二维码关注公众号,回复:
2828681 查看本文章
![](/qrcode.jpg)
npm run dev
![](https://pic1.zhimg.com/80/v2-b803f6175ec6cdcd66dce152b6dac1c7_hd.jpg)
这时候项目就跑起来了,当前项目的目录结构如下所示:
![](https://pic3.zhimg.com/80/v2-798ffe3ffedb97516209fc37c49f0d86_hd.jpg)
有vue开发经验的朋友对这个目录肯定不会陌生了,这里就不多说了。
接下来我们要使用微信开发者工具运行这个小程序。
在微信开发者工具中新建项目
![](https://pic2.zhimg.com/80/v2-180df318be0d2f0646e48ef5a48836a6_hd.jpg)
其中项目目录选择vue项目中的dist目录。
appID填写自己小程序的appID,没有的话可以点选体验“小程序”,只影响是否可以真机调试。
最后点击【确定】按钮,就可以看到实例代码的效果了,我们也可以扫码在真机中调试。
![](https://pic4.zhimg.com/80/v2-9ae90facee6eccc24827874cc5275455_hd.jpg)
大家可以看到,这是官方为我们提供的一个计数器的效果,点击+,数字会加1,点击-,数字会减1。我们可以在此基础上简单地修改代码。
![](https://pic3.zhimg.com/80/v2-dbceb3f88032818dc7b85a48c2fd6a17_hd.jpg)
我们修改src>page>count>store.js中的数值,就能改变计数器添加和减少的数量,修改完成之后,直接保存,项目会自动编译,然后我们就可以在微信开发者工具中查看小程序的效果了。
写在最后
我并不是一个小程序开发者,但是我能感受到腾讯对小程序的投入和重视越来越大,各大公司对小程序的动作也越来越多,我想2018年小程序绝对不会像2017年那样平淡。