为什么要将 mpvue 项目转成 uni-app 项目

发布时间：2023-04-25 08:55:14 所属栏目：教程来源：

导读：mpvue 框架和uni-app 框架都是使用 vue 语法来开发小程序，为什么我们会更加推荐用 uni-app 框架来开发项目呢？下面我们来具体看一下。

mpvue 框架维护更新慢
mpvue 框架作为一个开源项目，已经几年没有代码更新

mpvue 框架和uni-app 框架都是使用 vue 语法来开发小程序，为什么我们会更加推荐用 uni-app 框架来开发项目呢？下面我们来具体看一下。

mpvue 框架维护更新慢
mpvue 框架作为一个开源项目，已经几年没有代码更新记录了。不仅仅是维护更新慢的问题，也可以说 mpvue 框架已经停止维护了。

虽然官方没有发布停止维护的通知，但是一个几年没有维护的开源框架，基本上已经说明开发团队后期不打算再继续维护了。

mpvue 框架与 uni-app 框架性能对比
uni-app 框架的技术团队对比过 wepy/mpvue/Taro/uni-app/原生小程序的性能，测试项目包括长列表加载、组件状态更新这两个比较容易出现性能问题的实例。

最终得出的结论是 uni-app 性能更优，具体结果如下：
微信原生开发手工优化,uni-app>微信原生开发未手工优化,Taro > wepy > mpvue

我们可以看到 uni-app 不管从开发维护还是项目性能来讲，都是更优的。还有很多其他的优点，比如：uni-app 项目支持在更多的平台上面发布上线、生态更加完善等，这些都是我们更建议选择 uni-app 框架的原因。

下面我们来看看如果将mpvue 项目转换成 uni-app 项目吧。

将 mpvue 项目转换成 uni-app 项目
我们在不改变代码，只修改项目配置的情况下，可以将 mpvue 开发的小程序直接转变为 uni-app，为开发者进行框架的切换提供了很大的便利。下面我们来看看具体步骤：

创建 uni-app 项目
直接在 HbuilderX 中创建项目，点击菜单栏-文件-新建-项目，出现创建项目的界面，选择 uni-app 项目，并选择默认模板。

当然如果已经安装了 vue 运行环境，也可以使用 cli 方式创建项目，执行 vue create -p dcloudio/uni-preset-vue uniappPro 即可创建。

转移项目文件
我们准备好现成的 mpvue 项目，现在将 mpvue 项目中的文件复制到刚刚创建好的 uni-app 项目中。

mpvue 项目中的 src/components 文件夹复制到 uni-app 项目根目录下

mpvue 项目中的 src/pages文件夹替换掉到 uni-app 项目根目录下面的pages文件夹，并删除每个页面目录中的 main.js 和main.json 文件
后面main.json 文件中的配置都会转移到 pages.json 文件中。

配置 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"
   }
}

将其他文件也复制到 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 文件夹。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!