小程序：mpvue框架转uni_app框架采坑记录

uni-app可以多端输出，各平台之前的老项目可以向uni-app转换迁移。mpvue和uni_app都是一个使用 Vue.js 开发所有前端应用的框架,uni-app对vue语法的支持是mpvue的超集， 使用过mpvue几乎不用特地学习uni-app，有点坑的是mpvue 项目没有转换器，需要手动转换。
mpvue 项目（组件）迁移指南、示例及资源汇总： https://ask.dcloud.net.cn/article/34945

根据uni-app提供的文档进行了手动转换，遇到大坑如下，希望存在同样问题的童鞋蹦过去。

通过 HBuilderX 可视化界面 创建uni-app

1、HBuilderX里新建默认模板的uni-app项目
2、HBuilderX创建的项目，它的src是根目录，此时将mpvue项目src目录内的文件拷贝到uni-app项目，查找页面和组件内对资源的引用，检查并修正路径。

文件迁移路径

3、修改页面文件名称，删除每个页面的main.js和main.json文件，将main.json导航和其他配置信息写入pages.json文件中，并将页面名称修改为main.vue。 注意：这里不需要改文件夹的名称
4、mpvue的api\像素单位（px、rpx）转换成uni的api\像素单位（upx） 小技巧：全局搜索px;全局替换成rpx; ,再次全局搜索rrpx;全局替换成rpx;最后全局搜索rpx;全局替换成upx; 。至于padding:20rpx 20rpx;只能在页面调整了，或是写个正则和脚本全局换
5、手动安装的模块需要使用相对路径引入；手动安装的模块版本要和原项目要求一致；手动安装的模块的依赖要一并安装。

## 通过vue-cli命令行创建uni-app

1、安装环境

// 确认手脚架是否安装
 vue --version
//全局安装vue-cli
npm install -g @vue/cli
//创建uni-app 推荐使用正式版
vue create -p dcloudio/uni-preset-vue 项目文件名称

创建项目步骤

2、项目文件迁移
修改页面文件名称，删除每个页面的main.js和main.json文件，将main.json导航和其他配置信息写入pages.json文件中，并将页面名称修改为main.vue。 注意：这里不需要改文件夹的名称

文件迁移路径

3、完成文件迁移后根据package.json配置文件中的依赖配置下载安装

npm install
//或是使用yarn
yarn
// 根据报错或是警告需要自己安装指定包
npm install --save 缺少包名称
//开发构建
npm run dev:mp-weixin
//发版打包构建
npm run build:mp-weixin

// 包缺失报错
npm WARN saveError Unexpected token / in JSON at position 4664
npm WARN @dcloudio/[email protected] requires a peer of adbkit@^2.11.1 but none is installed. You must install peer dependencies yourself.
npm WARN @dcloudio/[email protected] requires a peer of jimp@^0.10.1 but none is installed. You must install peer dependencies yourself.
npm WARN @dcloudio/[email protected] requires a peer of node-simctl@^6.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN @dcloudio/[email protected] requires a peer of puppeteer@^3.0.1 but none is installed. You must install peer dependencies yourself.