基於mpvue的小程序項目搭建的步驟

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 -v

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

圖片.png

步驟2：檢查npm版本

$ npm -v $ npm -v

步驟3： 安裝淘寶鏡像

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

因爲npm是國外的，使用起來比較慢，咱們這裏使用淘寶的cnpm鏡像來安裝vue.

步驟4： 全局安裝 vue-cli

$ npm install --global 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 $ vue init mpvue/mpvue-quickstart my-project

至於項目名稱，做者，使用何種框架等提問信息，新手一路回車選擇默認便可。

打開d盤，查看建立生成的目錄my-project

步驟6：安裝my-project項目所須要的依賴

$ cd my-project $ npm install $ npm run dev $ 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
90後前端妹子，愛編程，愛運營，愛折騰。
堅持總結工做中遇到的技術問題，堅持記錄工做中所所思所見，歡迎你們一塊兒探討交流。

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

公衆號回覆「1」，拉你進程序員技術討論羣.