mpvue項(xiàng)目轉(zhuǎn)成 uni-app 項(xiàng)目

1. 前言

mpvue 框架是一個(gè)很棒的小程序開發(fā)框架，由美團(tuán)技術(shù)團(tuán)隊(duì)打造，18年上線的。當(dāng)時(shí)一上線就獲得了小程序界的廣泛關(guān)注，因?yàn)?mpvue 無限接近 vue 開發(fā)，基本做到了從 Vue.js 到小程序的零成本切換。

如果之前掌握了 Vue.js 語法，用 mpvue 框架開發(fā)小程序幾乎不會(huì)增加新的學(xué)習(xí)成本，降低了開發(fā)小程序的門檻，所以受到很多開發(fā)者的歡迎。那我們?yōu)槭裁床焕^續(xù)使用 mpvue 框架，要將 mpvue 項(xiàng)目轉(zhuǎn)成 uni-app 項(xiàng)目呢？

這一小節(jié)主要講解為什么要將 mpvue 項(xiàng)目轉(zhuǎn)成 uni-app 項(xiàng)目以及如何將 mpvue 項(xiàng)目轉(zhuǎn)換成 uni-app 項(xiàng)目。

2. 為什么要將 mpvue 項(xiàng)目轉(zhuǎn)成 uni-app 項(xiàng)目

mpvue 框架和uni-app 框架都是使用 vue 語法來開發(fā)小程序，為什么我們會(huì)更加推薦用 uni-app 框架來開發(fā)項(xiàng)目呢？下面我們來具體看一下。

2.1 mpvue 框架維護(hù)更新慢

mpvue 框架作為一個(gè)開源項(xiàng)目，已經(jīng)幾年沒有代碼更新記錄了。不僅僅是維護(hù)更新慢的問題，也可以說 mpvue 框架已經(jīng)停止維護(hù)了。

雖然官方?jīng)]有發(fā)布停止維護(hù)的通知，但是一個(gè)幾年沒有維護(hù)的開源框架，基本上已經(jīng)說明開發(fā)團(tuán)隊(duì)后期不打算再繼續(xù)維護(hù)了。

2.2 mpvue 框架與 uni-app 框架性能對(duì)比

uni-app 框架的技術(shù)團(tuán)隊(duì)對(duì)比過 wepy/mpvue/taro/uni-app/原生小程序的性能，測(cè)試項(xiàng)目包括長(zhǎng)列表加載、組件狀態(tài)更新這兩個(gè)比較容易出現(xiàn)性能問題的實(shí)例。

最終得出的結(jié)論是 uni-app 性能更優(yōu)，具體結(jié)果如下：
微信原生開發(fā)手工優(yōu)化,uni-app>微信原生開發(fā)未手工優(yōu)化,taro > wepy > mpvue

官網(wǎng)性能對(duì)比的文章：
小程序開發(fā)：用原生還是選框架（wepy/mpvue/taro/uni-app）
鏈接：https://ask.dcloud.net.cn/article/35947

我們可以看到 uni-app 不管從開發(fā)維護(hù)還是項(xiàng)目性能來講，都是更優(yōu)的。還有很多其他的優(yōu)點(diǎn)，比如：uni-app 項(xiàng)目支持在更多的平臺(tái)上面發(fā)布上線、生態(tài)更加完善等，這些都是我們更建議選擇 uni-app 框架的原因。

下面我們來看看如果將mpvue 項(xiàng)目轉(zhuǎn)換成 uni-app 項(xiàng)目吧。

3. 將 mpvue 項(xiàng)目轉(zhuǎn)換成 uni-app 項(xiàng)目

我們?cè)诓桓淖兇a，只修改項(xiàng)目配置的情況下，可以將 mpvue 開發(fā)的小程序直接轉(zhuǎn)變?yōu)?uni-app，為開發(fā)者進(jìn)行框架的切換提供了很大的便利。下面我們來看看具體步驟：

3.1 創(chuàng)建 uni-app 項(xiàng)目

直接在 HbuilderX 中創(chuàng)建項(xiàng)目，點(diǎn)擊菜單欄-文件-新建-項(xiàng)目，出現(xiàn)創(chuàng)建項(xiàng)目的界面，選擇 uni-app 項(xiàng)目，并選擇默認(rèn)模板。

當(dāng)然如果已經(jīng)安裝了 vue 運(yùn)行環(huán)境，也可以使用 cli 方式創(chuàng)建項(xiàng)目，執(zhí)行 vue create -p dcloudio/uni-preset-vue uniappPro 即可創(chuàng)建。

3.2 轉(zhuǎn)移項(xiàng)目文件

我們準(zhǔn)備好現(xiàn)成的 mpvue 項(xiàng)目，現(xiàn)在將 mpvue 項(xiàng)目中的文件復(fù)制到剛剛創(chuàng)建好的 uni-app 項(xiàng)目中。

3.2.1 mpvue 項(xiàng)目中的 src/components 文件夾復(fù)制到 uni-app 項(xiàng)目根目錄下

復(fù)制完成后 uni-app 目錄效果如下：

3.2.2 mpvue 項(xiàng)目中的 src/pages文件夾替換掉到 uni-app 項(xiàng)目根目錄下面的pages文件夾，并刪除每個(gè)頁面目錄中的 main.js 和main.json 文件

后面main.json 文件中的配置都會(huì)轉(zhuǎn)移到 pages.json 文件中。

操作完成后 uni-app 目錄效果如下：

3.2.3 配置 pages.json 文件，根據(jù) mpvue 項(xiàng)目的 app.json 和 main.json 文件中的頁面配置信息來填寫

需要注意以下幾點(diǎn)：

• 將 pages 配置項(xiàng)中的項(xiàng)目路徑改成 .vue 頁面的路徑，比如將 "pages/index/main" 改成 "pages/index/index"。并將 main.json 文件中的配置寫到每個(gè) page 中的 style 配置項(xiàng)中；
• 將 window 配置項(xiàng)改成 globalStyle 配置項(xiàng)。

實(shí)例：
mpvue 項(xiàng)目的app.json文件。

{
  "pages": [
    "pages/index/main",
    "pages/me/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#EA5149",
    "navigationBarTitleText": "慕課網(wǎng)",
    "navigationBarTextStyle": "black"
  }
}

轉(zhuǎn)換成 uni-app 項(xiàng)目的 pages.json文件。

{
	"pages": [
	  {
		"path": "pages/index/index",
		"style": {
// 原是 main.json 文件中的配置
			"enablePullDownRefresh":true
		}
	  },
	  {
		"path" : "pages/me/me",
		"style" : {}
	  }
	],
	"globalStyle": {
		"backgroundTextStyle": "light",
		"navigationBarBackgroundColor": "#EA5149",
		"navigationBarTitleText": "慕課網(wǎng)",
		"navigationBarTextStyle": "black"
	}
}

3.2.4 將其他文件也復(fù)制到 uni-app 項(xiàng)目中

主要有以下幾個(gè)文件：

• mpvue 項(xiàng)目中的 src/App.vue 文件替換掉 uni-app 項(xiàng)目根目錄下的 App.vue 文件；
• mpvue 項(xiàng)目中的 src/main.js 文件替換掉 uni-app 項(xiàng)目根目錄下的 main.js 文件，還有其他 src 文件夾下面的 .js 文件也一并復(fù)制過來；
• mpvue 項(xiàng)目中的 src/units 文件夾粘貼到 uni-app 項(xiàng)目根目錄下；
• mpvue 項(xiàng)目根目錄下的 static 文件夾替換掉 uni-app 項(xiàng)目根目錄下的 static 文件夾。

3.3 測(cè)試項(xiàng)目

點(diǎn)擊菜單欄-運(yùn)行，將項(xiàng)目運(yùn)行到內(nèi)置瀏覽器，看看控制臺(tái)有沒有報(bào)錯(cuò)，根據(jù)報(bào)錯(cuò)提示來修改其他的錯(cuò)誤。
比較常見的錯(cuò)誤有：

• 路徑錯(cuò)誤：根據(jù)系統(tǒng)提示修改成正確路徑即可；
• mpvue自有 API 不兼容：比如 mpvue.request，需要改為 uni.request；
• 預(yù)編譯錯(cuò)誤：一般是缺少了插件等原因，比如 mpvue 項(xiàng)目中使用了 scss 編譯，我們需要在 HBuilderX 中安裝這個(gè)插件，不然就會(huì)出現(xiàn)預(yù)編譯錯(cuò)誤，點(diǎn)擊工具-插件安裝，根據(jù)系統(tǒng)提示就可以安裝插件。

4. 小結(jié)

本小節(jié)給大家演示了如何將 mpvue 項(xiàng)目轉(zhuǎn)成 uni-app 項(xiàng)目，可以發(fā)現(xiàn)基本只需要復(fù)制粘貼就可以了，不需要我們重新編寫代碼，非常的方便。還有其他項(xiàng)目的轉(zhuǎn)換，可以參考官網(wǎng)的示例：

vue h5項(xiàng)目轉(zhuǎn)換uni-app指南：https://ask.dcloud.net.cn/article/36174
微信小程序轉(zhuǎn)換uni-app指南及轉(zhuǎn)換器：https://ask.dcloud.net.cn/article/35786
wepy轉(zhuǎn)uni-app轉(zhuǎn)換器：https://github.com/zhangdaren/wepy-to-uniapp