• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

使用vue.js开发小程序

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

刚刚开源的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-projectnpm install

最后,运行走起~

npm run dev

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

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

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

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

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

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

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

 

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

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

写在最后

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
四十六、微信小程序快速开发入门发布时间:2022-07-18
下一篇:
socket收发报文小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap