mpvue項目轉成 uni-app 項目

1. 前言

mpvue 框架是一個很棒的小程序開發框架，由美團技術團隊打造，18年上線的。當時一上線就獲得了小程序界的廣泛關注，因為 mpvue 無限接近 vue 開發，基本做到了從 Vue.js 到小程序的零成本切換。

如果之前掌握了 Vue.js 語法，用 mpvue 框架開發小程序幾乎不會增加新的學習成本，降低了開發小程序的門檻，所以受到很多開發者的歡迎。那我們為什么不繼續使用 mpvue 框架，要將 mpvue 項目轉成 uni-app 項目呢？

這一小節主要講解為什么要將 mpvue 項目轉成 uni-app 項目以及如何將 mpvue 項目轉換成 uni-app 項目。

2. 為什么要將 mpvue 項目轉成 uni-app 項目

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

2.1 mpvue 框架維護更新慢

mpvue 框架作為一個開源項目，已經幾年沒有代碼更新記錄了。不僅僅是維護更新慢的問題，也可以說 mpvue 框架已經停止維護了。

雖然官方沒有發布停止維護的通知，但是一個幾年沒有維護的開源框架，基本上已經說明開發團隊后期不打算再繼續維護了。

2.2 mpvue 框架與 uni-app 框架性能對比

uni-app 框架的技術團隊對比過 wepy/mpvue/taro/uni-app/原生小程序的性能，測試項目包括長列表加載、組件狀態更新這兩個比較容易出現性能問題的實例。

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

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

我們可以看到 uni-app 不管從開發維護還是項目性能來講，都是更優的。還有很多其他的優點，比如：uni-app 項目支持在更多的平臺上面發布上線、生態更加完善等，這些都是我們更建議選擇 uni-app 框架的原因。

下面我們來看看如果將mpvue 項目轉換成 uni-app 項目吧。

3. 將 mpvue 項目轉換成 uni-app 項目

我們在不改變代碼，只修改項目配置的情況下，可以將 mpvue 開發的小程序直接轉變為 uni-app，為開發者進行框架的切換提供了很大的便利。下面我們來看看具體步驟：

3.1 創建 uni-app 項目

直接在 HbuilderX 中創建項目，點擊菜單欄-文件-新建-項目，出現創建項目的界面，選擇 uni-app 項目，并選擇默認模板。

當然如果已經安裝了 vue 運行環境，也可以使用 cli 方式創建項目，執行 vue create -p dcloudio/uni-preset-vue uniappPro 即可創建。

3.2 轉移項目文件

我們準備好現成的 mpvue 項目，現在將 mpvue 項目中的文件復制到剛剛創建好的 uni-app 項目中。

3.2.1 mpvue 項目中的 src/components 文件夾復制到 uni-app 項目根目錄下

復制完成后 uni-app 目錄效果如下：

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

后面main.json 文件中的配置都會轉移到 pages.json 文件中。

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

3.2.3 配置 pages.json 文件，根據 mpvue 項目的 app.json 和 main.json 文件中的頁面配置信息來填寫

需要注意以下幾點：

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

實例：
mpvue 項目的app.json文件。

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

轉換成 uni-app 項目的 pages.json文件。

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

3.2.4 將其他文件也復制到 uni-app 項目中

主要有以下幾個文件：

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

3.3 測試項目

點擊菜單欄-運行，將項目運行到內置瀏覽器，看看控制臺有沒有報錯，根據報錯提示來修改其他的錯誤。
比較常見的錯誤有：

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

4. 小結

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

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