一個會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.小夥伴有安裝,使用問題均可以一塊兒交流!以爲不錯的,小夥伴點個贊吧!