vue整合uniapp_vue h5转换uni-app指南（vue转uni、h5转uni）

如果你已经有了一个基于vue开发的H5站点，想转换为uni-app。

首先注意2个前提：

1、你的web站是适合手机屏幕的；

2、你的H5代码是全后端分离的，uni-app只处理前端代码。

一切从新建一个uni-app项目开始。然后依次进行

文件处理

把之前的vue web项目的前端代码copy到新项目下

如果之前的文件后缀名是.html，需要改为.vue，并注意遵循vue单文件组件SFC规范，比如必须一级根节点为template、script、style，template节点下必须且只能有一个根view节点，所有内容写在这个根view节点下。

处理页面路由

uni-app默认是小程序的路由方式，在pages.json里管理页面。如果你使用vue rooter的话，一种是改造为pages.json方式，另一种是使用三方插件，比如vue rooter for uni-app

静态文件(如图片)挪到static目录

uni-app工程目录下有个static目录，用于存放静态文件，这个目录不编译，直接整体copy到发行代码里的。

如果你希望自定义静态资源目录，可以在vue.config.js中自定义。

标签代码处理

相同功能的组件自动转换

uni-app的标签组件与小程序相同，比如

变成了， 变成了。

但uni-app的编译器已经自动处理了这部分转换，如果源码中写了可自动转换的组件，在编译到非H5端时会被自动转换(再编译回到H5端时div还是div)。

div 改成 view