接下來(lái)。。。。。
現(xiàn)代前端開(kāi)發(fā)框架和環(huán)境都是需要 Node.js 的,如果沒(méi)有的話(huà),請(qǐng)先下載 nodejs 并安裝。
然后打開(kāi)命令行工具:
- # 1. 先檢查下 Node.js 是否安裝成功
- $ node -v
- v8.9.0
- $ npm -v
- 5.6.0
- # 2. 由于眾所周知的原因,可以考慮切換源為 taobao 源
- $ npm set registry https://registry.npm.taobao.org/
- # 3. 全局安裝 vue-cli
- # 一般是要 sudo 權(quán)限的
- $ npm install --global vue-cli@2.9
- # 4. 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
- # 新手一路回車(chē)選擇默認(rèn)就可以了
- $ vue init mpvue/mpvue-quickstart my-project
- # 5. 安裝依賴(lài),走你
- $ cd my-project
- $ npm install
- $ npm run dev
隨著運(yùn)行成功的回顯之后,可以看到本地多了個(gè) dist
目錄,這個(gè)目錄里就是生成的小程序相關(guān)代碼。
小程序自己有一個(gè)專(zhuān)門(mén)的微信開(kāi)發(fā)者工具,最新版本下載地址。
這一步比較簡(jiǎn)單,按照提示一步步安裝好就行,然后用微信掃描二維碼登陸。 至此小程序的開(kāi)發(fā)環(huán)境差不多完成。
選擇 小程序項(xiàng)目
并依次填好需要的信息:
項(xiàng)目目錄:就是剛剛創(chuàng)建的項(xiàng)目目錄(非 dist 目錄)
AppID:沒(méi)有的話(huà)可以點(diǎn)選體驗(yàn)“小程序”,只影響是否可以真機(jī)調(diào)試。
項(xiàng)目名稱(chēng)。
如圖:
點(diǎn)擊“確定”按鈕后會(huì)跳到正式的開(kāi)發(fā)頁(yè)面,點(diǎn)擊“編輯器”按鈕,關(guān)閉自帶的小程序編輯器。然后如圖:
此時(shí),整個(gè) mpvue
項(xiàng)目已經(jīng)跑起來(lái)了。
用自己趁手的編輯器(或者IDE)打開(kāi) my-project
中的 src
目錄下的代碼試試,如示例:
有詳細(xì)視頻地址鏈接 http://mpvue.com/assets/quick-start/dev.mp4
到此,上手完畢。
2018.7.23
mpvue-loader 1.1.2-rc.2 之后,優(yōu)化了 build 后的文件生成結(jié)構(gòu),生成的目錄結(jié)構(gòu)保持了源文件夾下的目錄結(jié)構(gòu),有利于對(duì)分包的支持。
新增的頁(yè)面需要重新 npm run dev
來(lái)進(jìn)行編譯
項(xiàng)目開(kāi)發(fā),更新中。。。
按上面的步驟創(chuàng)建的項(xiàng)目,新建頁(yè)面的時(shí)候是要建一個(gè)文件夾
但是用下面 github的項(xiàng)目已經(jīng)創(chuàng)建好的,是單獨(dú)的一個(gè)文件就行,和之前vue的頁(yè)面一樣
聯(lián)系客服