日韩黑丝制服一区视频播放|日韩欧美人妻丝袜视频在线观看|九九影院一级蜜桃|亚洲中文在线导航|青草草视频在线观看|婷婷五月色伊人网站|日本一区二区在线|国产AV一二三四区毛片|正在播放久草视频|亚洲色图精品一区

分享

基于vue開發(fā)微信小程序,入門開發(fā)步驟

 liang1234_ 2019-03-27

接下來。。。。。

1. 初始化一個(gè) mpvue 項(xiàng)目

現(xiàn)代前端開發(fā)框架和環(huán)境都是需要 Node.js 的,如果沒有的話,請(qǐng)先下載 nodejs 并安裝。

然后打開命令行工具:

  1. # 1. 先檢查下 Node.js 是否安裝成功
  2. $ node -v
  3. v8.9.0
  4. $ npm -v
  5. 5.6.0
  6. # 2. 由于眾所周知的原因,可以考慮切換源為 taobao 源
  7. $ npm set registry https://registry.npm./
  8. # 3. 全局安裝 vue-cli
  9. # 一般是要 sudo 權(quán)限的
  10. $ npm install --global vue-cli@2.9
  11. # 4. 創(chuàng)建一個(gè)基于 mpvue-quickstart 模板的新項(xiàng)目
  12. # 新手一路回車選擇默認(rèn)就可以了
  13. $ vue init mpvue/mpvue-quickstart my-project
  14. # 5. 安裝依賴,走你
  15. $ cd my-project
  16. $ npm install
  17. $ npm run dev

隨著運(yùn)行成功的回顯之后,可以看到本地多了個(gè) dist 目錄,這個(gè)目錄里就是生成的小程序相關(guān)代碼。

2. 搭建小程序的開發(fā)環(huán)境

小程序自己有一個(gè)專門的微信開發(fā)者工具,最新版本下載地址

這一步比較簡單,按照提示一步步安裝好就行,然后用微信掃描二維碼登陸。 至此小程序的開發(fā)環(huán)境差不多完成。

3. 調(diào)試開發(fā) mpvue

選擇 小程序項(xiàng)目 并依次填好需要的信息:

  • 項(xiàng)目目錄:就是剛剛創(chuàng)建的項(xiàng)目目錄(非 dist 目錄)

  • AppID:沒有的話可以點(diǎn)選體驗(yàn)“小程序”,只影響是否可以真機(jī)調(diào)試。

  • 項(xiàng)目名稱。

如圖:

點(diǎn)擊“確定”按鈕后會(huì)跳到正式的開發(fā)頁面,點(diǎn)擊“編輯器”按鈕,關(guān)閉自帶的小程序編輯器。然后如圖:

此時(shí),整個(gè) mpvue 項(xiàng)目已經(jīng)跑起來了。

用自己趁手的編輯器(或者IDE)打開 my-project 中的 src 目錄下的代碼試試,如示例:

有詳細(xì)視頻地址鏈接   http:///assets/quick-start/dev.mp4

到此,上手完畢。

4. 分包機(jī)制 2018.7.23

mpvue-loader 1.1.2-rc.2 之后,優(yōu)化了 build 后的文件生成結(jié)構(gòu),生成的目錄結(jié)構(gòu)保持了源文件夾下的目錄結(jié)構(gòu),有利于對(duì)分包的支持。

5. webpack 配置

注意事項(xiàng)

  1. 新增的頁面需要重新 npm run dev 來進(jìn)行編譯

項(xiàng)目開發(fā),更新中。。。

按上面的步驟創(chuàng)建的項(xiàng)目,新建頁面的時(shí)候是要建一個(gè)文件夾

但是用下面 github的項(xiàng)目已經(jīng)創(chuàng)建好的,是單獨(dú)的一個(gè)文件就行,和之前vue的頁面一樣

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多