您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

mpvue 项目转成 uni-app 项目

mpvue 框架是很棒的框架,由技术团队打造,18年上线的。当时一上线就获得了界的广泛关注,因为 mpvue 无限接近 vue 开发,基本做到了从 Vue.js 到的零成本切换。

如果之前掌握了 Vue.js 语法,用 mpvue 框架开发几乎不会新的学习成本,降低了开发的门槛,所以受到很多开发者的欢迎。那我们为什么不继续使用 mpvue 框架,要将 mpvue 项目转成 项目呢?

这一小节主要讲解为什么要将 mpvue 项目转成 项目以及如何将 mpvue 项目转换成 项目。

mpvue 框架和 框架都是使用 vue 语法来开发,为什么我们会更加推荐用 框架来开发项目呢?下面我们来具体看一下。

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

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

框架的技术团队对比过 wepy/mpvue///原生的,测试项目长列表加载、组件状态更新这两个比较容易出现问题的实例。

最终得出的结论是 更优,具体结果如下:
微信原生开发手工优化,>微信原生开发未手工优化, > wepy > mpvue

官网对比的:
:用原生还是选框架(wepy/mpvue//)

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

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

我们在不改变,只项目配置的情况下,可以将 mpvue 开发的直接转变为 ,为开发者进行框架的切换提供了很大的便利。下面我们来看看具体步骤:

直接在 HbuilderX 中创建项目,点击栏--新建-项目,出现创建项目的界面,选择 项目,并选择认模板。

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

我们准备好现成的 mpvue 项目,现在将 mpvue 项目中的复制到刚刚创建好的 项目中。

后面main.json 中的配置都会转移到 pages.json 中。

操作完成后 目录如下:

需要注意以下几点:

实例:
mpvue 项目的app.json。

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

转换成 项目的 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"
	}
}

主要有以下几个:

点击栏-运行,将项目运行到内置浏览器,看看控制台有没有报错,根据报错来其他的。
比较常见的有:

本小节给大家演示了如何将 mpvue 项目转成 项目,可以发现基本只需要复制粘贴就可以了,不需要我们重新编写,非常的方便。还有其他项目的转换,可以参考官网的示例:

vue h5项目转换指南:
转换指南及转换器:
wepy转转换器:


联系我
置顶