mpvue项目（组件）迁移指南、示例及资源汇总

2022-01-26 12:58:28

首先，为什么要从mpvue转uni-app？
因为uni-app对vue语法支持更全面（如支持过滤器）、性能更高、支持平台更多（支持H5和App）。这里有详细的评测https://juejin.im/post/5ca1736af265da30ae314248

然后进入正题。

uni-app与mpvue，都是使用vue语法开发小程序。从语法支持度来讲，mpvue是uni-app的子集。
所以mpvue开发的小程序可不用改代码可直接变为uni-app。
但需要修改工程配置，可以参考以下教程手动移植。

项目迁移

HBuilderX里新建默认模板的uni-app项目
将mpvue项目src目录内的文件拷贝到uni-app项目
建立页面配置，根据原项目的app.json或者main.js内的页面配置填写pages.json的内容，并删除原来的页面配置。如果项目未手动配置所有页面，需要根据pages目录内的页面手动增加页面信息。每个页面单独的配置从相关页面的main.json文件或者main.js文件内拷贝，并删除原有配置。
修改页面文件名称，删除每个页面的main.js和main.json文件，并将页面名称修改为main.vue。
静态资源拷贝，将原项目static目录拷贝到uni-app项目，查找页面和组件内对资源的引用，检查并修正路径。
手动安装package.json文件dependencies节点下的模块（忽略mpvue、vuex、flyio，这些已经内置在uni-app内），安装方式可参考参考社区文章：uni-app引用npm第三方库，HBuilderX 0.1.51或以上版本可直接使用npm管理依赖：NPM支持。

一般的单文件组件可直接拷贝到项目内复用，如果组件css内使用的单位是px建议转换为rpx或upx，使用npm包管理的组件参考npm模块的复用方式安装到本地。

标签方面，不需要把div改成view，mpvue内置到uni-app中，会自动转。
手动安装的模块需要使用相对路径引入
手动安装的模块版本要和原项目要求一致
手动安装的模块的依赖要一并安装。
使用HBuilderX 0.1.49或以上版本新建的工程（manifest.json内transformPx值为false）不用修改移植组件css内的数值和单位。
uni-app强化了条件编译以适合多端发布，这是mpvue没有的重要功能，具体参考

WeUI - 用 vue 写小程序，基于 mpvue 框架重写 weui。https://github.com/KuangPF/wxapp-vue
mpvue-zanui - 使用 mpvue 框架重写 zanui。https://github.com/samwang1027/mpvue-zanui
mp-weui - 基于 mpvue 和 weui-wxss 封装的小程序UI库。https://github.com/youngluo/mp-weui
mpvue-iview-weapp -基于mpvue导入iview-weapphttps://github.com/wkl007/mpvue-iview-weapp

注意这些mpvue的ui库，只能跨微信小程序和app，无法跨到h5和支付宝百度头条小程序。真正7端全跨的ui库参考这里：http://ask.dcloud.net.cn/article/35489