基於mpvue的小程式專案搭建的步驟

2022-09-02 14:12:11 字數 2064 閱讀 6014

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

mpvue官網:

demo位址 :

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

.png

.png

$ npm -v
.png

$ npm set registry
由於npm是國外的,使用起來比較慢,我們這裡使用**的cnpm映象來安裝vue.

$ npm install --global vue-cli
一般是要 sudo 許可權的(開啟cmd時要以管理員的身份,不然就會報錯

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

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

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

$ vue init mpvue/mpvue-quickstart my-project
至於專案名稱,作者,使用何種框架等提問資訊,新手一路回車選擇預設即可。

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

1:執行cd my-project命令,進入專案

2:執行npm install命令之後,本地多了乙個node_moudules資料夾

3:執行npm run dev,執行成功

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

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

官方五分鐘快速上手教程:mpvue/quickstart/

基於mpvue的小程式專案搭建的步驟一

未標題 1.png mpvue 是美團開源的一套語法與vue.js一致的 快速開發小程式的前端框架,按官網說可以達到小程式與h5介面使用一套 使用此框架,開發者將得到完整的 vue.js 開發體驗,同時為 h5 和小程式提供了 復用的能力。如果想將 h5 專案改造為小程式,或開發小程式後希望將其轉換...

mpvue 快速建立小程式專案

教程在這裡,其中核心的語句是 安裝vue cli npm install global vue cli 2.9 建立乙個專案 vue init mpvue mpvue quickstart my project 切換到專案資料夾,並安裝依賴 cd my project npm install 執行 ...

vue製作小程式 mpvue

mpvue是乙個使用 vue.js 開發小程式的前端框架 npm i sass loader d npm i node sass d 1.先檢查下 node.js 是否安裝成功 node v v8.9.0 npm v 5.6.0 2.由於眾所周知的原因,可以考慮切換源為 taobao 源 3.全域性...