如果你已經有了一個基於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的標簽組件與小程序相同，比如<div>變成了<view>，<span>變成了<text>。
但uni-app的編譯器已經自動處理了這部分轉換，如果源碼中寫了可自動轉換的組件，在編譯到非H5端時會被自動轉換（再編譯回到H5端時div還是div）。 - 區域滾動使用scroll-view，不再使用div的區域滾動處理方式
- 左右、上下滑動切換，有專門的swiper組件，不要使用div模擬
- input的search，原來的type沒用了，改成confirmtype，詳見
- audio組件不再推薦使用，改成api方式，背景音頻api文檔
- 之前的v-html，可以在H5端和App端（需v3編譯器）使用，不能在小程序中使用。如需要在小程序使用，請使用rich-text組件或uparse擴展插件，詳見
js代碼處理
uni-app的非H5端，不管是App還是各種小程序，都不支持window、navigator、document等web專用對象。
uni-app的API與小程序保持一致，需要處理這些不同的API寫法
- 處理window api
- ajax 改成 uni.request。（插件市場也有適配uni-app的axios、flyio等封裝攔截器）
- cookie、session.storage 沒有了，改用 uni.storage 吧；local.storage 也改成 uni.storage。另外插件市場有一個墊片mp-storage，可使用之前的代碼，兼容運行在uni-app上，
- alert,confirm 改成 uni.showmodel
- window的resize 改為了 uni.onWindowResize
- 處理navigator api
- geolocation 的定位方式改為 uni.getLocation
- useragent的設備api沒有了，改用uni.getSystemInfo
- 處理dom api
- 如果使用標准vue的數據綁定，是不需要操作dom來修改界面內容的。如果沒有使用vue數據綁定，仍然混寫了jquery等dom操作，需要改為純數據綁定
- 有時獲取dom並不是為了修改顯示內容，而是為了獲取元素的長寬尺寸來做布局。此時uni-app提供了同小程序的另一種API，uni.createSelectorQuery
- 其他js api
web中還有canvas、video、audio、websocket、webgl、webbluetooth、webnfc，這些在uni-app中都有專門的API。 - 生命周期
uni-app補充了一批類小程序的聲明周期，包括App的啟動、頁面的加載，詳見https://uniapp.dcloud.io/collocation/frame/lifetime
vue h5一般在created或者mounted中請求數據，而在uni-app的頁面中，使用onLoad或者onShow中請求數據。（組件仍然是created或者mounted） - 少量不常用的vue語法在非h5端仍不支持，data必須以return的方式編寫，注意事項詳見
注意：如果你使用了一些三方ui框架、js庫，其中引用了包括一些使用了dom、window、navigator的三方庫，除非你只做H5端，否則需要更換。去uni-app的插件市場尋找替代品。如果找不到對應庫，必須使用for web的庫，在App端可以使用renderjs來引入這些for web的庫。
css代碼處理
uni-app發布到App(非nvue)、小程序時，顯示頁面仍然由webview渲染，css大部分是支持的。但需要注意
- 不支持 *選擇器
- 沒有body元素選擇器，改用page元素選擇器。（編譯到非H5時，編譯器會自動處理。所以不改也行）
- div等元素選擇器改為view、span和font改為text、a改為navigator、img改為image...（編譯到非H5時，編譯器會自動處理。所以不改也行）
- 不同端的瀏覽器兼容性仍然存在，避免使用太新的css語法，否則發布為App時，Android低端機（Android 4.4、5.x），會有樣式錯誤。當然在App端也可以引用x5瀏覽器內核來抹平瀏覽器差異。
本文是思路，不是工具。