使用mpvue搭建一個初始小程序

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/