1. 初始化一個 mpvue 項目
現(xiàn)代前端開發(fā)框架和環(huán)境都是需要 Node.js 的,如果沒有的話,請先下載 nodejs 并安裝。
然后打開命令行工具:
# 1. 先檢查下 Node.js 是否安裝成功$ node -vv8.9.0$ npm -v5.6.0# 2. 由于眾所周知的原因,可以考慮切換源為 taobao 源$ npm set registry https://registry.npm.taobao.org/# 3. 全局安裝 vue-cli# 一般是要 sudo 權(quán)限的$ npm install --global [email protected]# 4. 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目# 新手一路回車選擇默認就可以了$ vue init mpvue/mpvue-quickstart my-project# 5. 安裝依賴,走你$ cd my-project$ npm install$ npm run dev
隨著運行成功的回顯之后,可以看到本地多了個 dist 目錄,這個目錄里就是生成的小程序相關(guān)代碼。
2. 搭建小程序的開發(fā)環(huán)境
小程序自己有一個專門的微信開發(fā)者工具,最新版本下載地址。
這一步比較簡單,按照提示一步步安裝好就行,然后用微信掃描二維碼登陸。 至此小程序的開發(fā)環(huán)境差不多完成。
3. 調(diào)試開發(fā) mpvue
選擇 小程序項目 并依次填好需要的信息:
•項目目錄:就是剛剛創(chuàng)建的項目目錄(非 dist 目錄)
•AppID:沒有的話可以點選體驗“小程序”,只影響是否可以真機調(diào)試。
•項目名稱。
如圖:
小程序項目配置
點擊“確定”按鈕后會跳到正式的開發(fā)頁面,點擊“編輯器”按鈕,關(guān)閉自帶的小程序編輯器。然后如圖:
此時,整個 mpvue 項目已經(jīng)跑起來了。
用自己趁手的編輯器(或者IDE)打開 my-project 中的 src 目錄下的代碼試試。
總結(jié)
以上所述是小編給大家介紹的使用mpvue搭建一個初始小程序及項目配置方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對VEVB武林網(wǎng)網(wǎng)站的支持!
|
新聞熱點
疑難解答