1. 初始化一個 mpvue 項目 現代前端開發框架和環境都是需要 Node.js 的,如果沒有的話,請先下載 nodejs 並安裝。 然後打開命令行工具: 隨著運行成功的回顯之後,可以看到本地多了個 dist 目錄,這個目錄里就是生成的小程式相關代碼。 2. 搭建小程式的開發環境 小程式自己有一個 ...
1. 初始化一個 mpvue 項目
現代前端開發框架和環境都是需要 Node.js 的,如果沒有的話,請先下載 nodejs 並安裝。
然後打開命令行工具:
# 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 許可權的
$ npm install --global vue-cli@2.9
# 4. 創建一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇預設就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安裝依賴,走你
$ cd my-project
$ npm install
$ npm run dev
隨著運行成功的回顯之後,可以看到本地多了個 dist
目錄,這個目錄里就是生成的小程式相關代碼。
2. 搭建小程式的開發環境
這一步比較簡單,按照提示一步步安裝好就行,然後用微信掃描二維碼登陸。 至此小程式的開發環境差不多完成。
3. 調試開發 mpvue
選擇 小程式項目
並依次填好需要的信息:
- 項目目錄:就是剛剛創建的項目目錄(非 dist 目錄)
- AppID:沒有的話可以點選體驗“小程式”,隻影響是否可以真機調試。
- 項目名稱。
如圖:
點擊“確定”按鈕後會跳到正式的開發頁面,點擊“編輯器”按鈕,關閉自帶的小程式編輯器。然後如圖:
此時,整個 mpvue
項目已經跑起來了。
用自己趁手的編輯器(或者IDE)打開 my-project
中的 src
目錄下的代碼試試。
原文:http://mpvue.com/mpvue/quickstart/