mpvue 是美團開源的一套語法與vue.js一致的、快速開發小程式的前端框架，按官網說可以達到小程式與H5介面使用一套程式碼。使用此框架，開發者將得到完整的 Vue.js 開發體驗，同時為 H5 和小程式提供了程式碼複用的能力。如果想將 H5 專案改造為小程式，或開發小程式後希望將其轉換為 H5，mpvue 將是十分契合的一種解決方案。

Mpvue官網：http://mpvue.com/
demo地址 ：https://github.com/ccwyn/mpvuedemo/tree/master/my-project

使用Vue開發微信小程式：mpvue框架。端開發框架和環境都是需要 Node.js ，先安裝node.js開發環境，下載https://nodejs.org/en/，安裝完成之後，開啟cmd開始輸入命令。（我用的是win10系統，所以需要管理員許可權，右鍵點選以管理員身份執行cmd），不然會出現很多報錯。

步驟1. 檢查下 Node.js 是否安裝成功

$ node -v

我的node是安裝在d盤，所以先切入進D盤，在執行node -v命令，結果如下，出現版本號則表示安裝成功。

 

 

 

步驟2：檢查npm版本

$ npm -v

 

步驟3： 安裝淘寶映象

$ npm set registry https://registry.npm.taobao.org/

由於npm是國外的，使用起來比較慢，我們這裡使用淘寶的cnpm映象來安裝vue.

步驟4： 全域性安裝 vue-cli

$ npm install --global vue-cli

一般是要 sudo 許可權的(開啟cmd時要以管理員的身份，不然就會報錯

注意：很多人在這一步安裝報錯了，原因是要許可權哦

 

 

 

例如：
網上的解決方案用通過快捷鍵win+ r開啟cmd，這樣木有用，會被誤導，在win8或者win10下，win+R不是以管理員身份來執行的。在開始選單中選擇command以管理員身份執行即可。

 

開啟管理員執行之後，全域性安裝成功提示如下：

 

 

步驟5：建立一個基於 mpvue-quickstart 模板的新專案

$ vue init mpvue/mpvue-quickstart my-project

至於專案名稱，作者，使用何種框架等提問資訊，新手一路回車選擇預設即可。

 

開啟d盤，檢視建立生成的目錄my-project

 

 

步驟6：安裝my-project專案所需要的依賴

$ cd my-project
$ npm install
$ npm run dev

1：執行cd my-project命令，進入專案

 

 

 

2：執行npm install命令之後，本地多了一個node_moudules資料夾

 

 

3：執行npm run dev，執行成功

 

 

隨著執行成功的回顯之後，可以看到本地多了個 dist 目錄，這個目錄裡就是生成的小程式相關程式碼。

 

 

以上，Vue開發環境已經搭建好，接下來開啟微信開發者工具，，除錯開發我們的框架 mpvue，依次填寫需要的資訊，微信開發者工具環境搭建詳見教程：https://www.jianshu.com/p/0ff8c3b2f59f

 

 

填寫之後跳轉到編輯工具頁面，mpvue框架專案已經跑起來了，完美，get到技能了嗎？投入開發即可

 

 

官方五分鐘快速上手教程：http://mpvue.com/mpvue/quickstart/

原文作者：祈澈姑娘技術部落格：https://www.jianshu.com/u/05f416aefbe1

• 關注「程式設計微刊」公眾號 ，在微信後臺回覆「領取資源」，獲取IT資源300G乾貨大全。