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，依次填寫需要的信息，微信開發者工具環境搭建詳見教程：http://www.lxweimin.com/p/0ff8c3b2f59f
填寫之后跳轉到編輯工具頁面，mpvue框架項目已經跑起來了，完美，get到技能了嗎？投入開發即可
官方五分鐘快速上手教程：http://mpvue.com/mpvue/quickstart/
原文作者：祈澈姑娘
技術博客：http://www.lxweimin.com/u/05f416aefbe190后前端妹子，愛編程，愛運營，愛折騰。
堅持總結工作中遇到的技術問題，堅持記錄工作中所所思所見，歡迎大家加入群聊，一起探討交流。
歡迎關注【編程微刊】公眾號，回復【領取資源】,500G編程學習資源干貨免費送。
