一个会vue的前端,如何快速上手开发小程序

如题，在咱们掌握VUE技术的提早之上,若是小程序也能用vue的方式开发,那岂不是驾轻就熟。

技术框架：mpVue + vant-weapp

1.初始化一个mpvue项目

现代前端开发框架和环境都是须要 Node.js 的，若是没有的话，请先下载 nodejs 并安装。而后打开命令行工具：

随着运行成功的回显以后，能够看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

2.搭建小程序开发环境

小程序本身有一个专门的微信开发者工具，最新版本下载地址。

这一步比较简单，按照提示一步步安装好就行，而后用微信扫描二维码登录。 至此小程序的开发环境差很少完成。

3.调试开发mpvue

选择 小程序项目 并依次填好须要的信息：

项目目录：就是刚刚建立的项目目录（非 dist 目录）
AppID：没有的话能够点选体验“小程序”，只影响是否能够真机调试。
项目名称。
如图：

注意: appid是你微信公众平台->小程序->开发->开发设置->appId

新建完成以后,看到这样一个界面:(咱们开发能够选择本身喜欢的编译器,调试必须微信开发者工具.)

4.Vant Weapp的安装

经过 npm 安装

npm i vant-weapp -S --production

经过 yarn 安装

yarn add vant-weapp --production

5.Vant Weapp的组件引入

在app.json中进行配置,按需加载引入.

注意: 安装完成Vant Weapp以后,须要把node_modules下vant-weapp/dist文件静态复制到static目录下,在进行引入.

6.页面介绍.

page目录下的每一个页面,都须要在app.json中的pages中引入.如步骤5图中的所示.

1.具体页面开发彻底跟以前开发方式彻底相同,能够直接使用已经引入的Vant Weapp组件,亦能够直接引入微信小程序原生组件.好比 swiper等.(具体使用参考https://developers.weixin.qq....

2.微信小程序原生的方法使用 mpvue. 方式调用.

1. css单位使用 rpx, 原则上 20rpx === 10px,rpx设置是px单位的2倍数值.

4.其余的具体请参考

mpvue: http://mpvue.com/mpvue/

Vant Weapp: https://youzan.github.io/vant...

wechat: https://developers.weixin.qq....

5.我最近刚也开始研究,新写了一个demo.小伙伴有安装,使用问题均可以一块儿交流!以为不错的,小伙伴点个赞吧!