快速上手小程式的mpvue框架

2022-02-06 02:16:35 字數 2135 閱讀 8818

一.什麼是mpvue框架?

mpvue 是乙個使用 vue.js 開發小程式的前端框架。框架基於 vue.js 核心(所以建議熟練掌握vue再使用mpvue框架,否則還是建議去使用原生框架去寫小程式),mpvue 修改了 vue.js 的 runtime 和 compiler 實現,使其可以執行在小程式環境中,從而為小程式開發引入了整套 vue.js 開發體驗。

二.必要的開發基礎

①   熟練掌握vue.js(未曾使用過vue這個框架的話,建議vue的官方文件進行學習:

))⑤   vue-cli (vue專用的專案腳手架工具,開啟cmd,輸入命令:npm install --global vue-cli)

三.初始化專案

1.開啟cmd,快捷鍵win+r;

2.檢查node.js是否安裝成功,輸入命令:

node -v
出現版本號即為成功;

3.檢查vue-cli是否安裝成功,輸入命令:

vue -v
出現版本號即為成功;

5.進入你想儲存專案的資料夾(比如d盤,就先輸入命令d:),建立乙個基於 mpvue-quickstart 模板的新專案:

這個時候你就能看見d盤有乙個wxvueshop的專案檔案了。

6.不急,我們這時候進入這個資料夾,輸入命令:

cd wxvueshop
7.然後,我們進行依賴庫的安裝,輸入命令:

8.安裝完成後,我們執行一下,輸入命令:

npm run dev
隨著執行成功的執行之後,可以看到本地wxvueshop多了個dist目錄,這個目錄裡就是生成的小程式相關**,這個時候我們就成功初始化專案了。跑起來了...

四.執行檢視專案

點選「確定」按鈕,進入小程式開發主介面,在左邊的小程式模擬器中就能看到wxvueshop小程式的執行結果了:

五.編寫代

如上圖,我們新建立的專案有生成預設頁面,現在我們把它全部去掉,具體如下:

1.刪掉src/componentssrc/pagessrc/utils三個目錄下的所有**檔案;

檔案中的內容重置成:

3.將src/main.js檔案中的內容重置成:

export

default

}}現在,我們的**就成了乙個小程式頁面都沒有的初始狀態。

4.新建頁面,以後的每乙個mpvue頁面元件都會擁有如下這樣的結構。

頁面寫法如下:

login.vue:

}

main.js:

export

default

}就這樣我們已經初步了解mpvue框架了,之後有時間會寫高階版,上面內容如果有出錯的地方,麻煩大佬們指正,謝謝!

快速上手mpvue 專案

初始化乙個 mpvue 專案 node v v8.9.0 npm v 5.6.0 2.由於眾所周知的原因,可以考慮切換源為 taobao 源 npm set registry 3.全域性安裝 vue cli 一般是要 sudo 許可權的 npm install global vue cli 2.9 ...

mpvue 快速建立小程式專案

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

mpvue2 0多端小程式框架

注意事項 my project 為建立的專案名 vue init mpvue mpvue quickstart my project也可以使用yarn進行安裝 yarn裝包成功後框架提供的readme中是使用npm dev這裡是錯誤的 直接使用yarn dev就可以了 cd my project n...