?Vue.js 開發能夠同時運行在不同平臺（如 Web、移動平臺和桌面平臺）的應用程序。以下是一些常見的跨平臺解決方案：
?1.
-
使用 Vue.js 官方發布的框架：
-
Vue.js：主要用于 Web 開發。
-
Vue Native：使用 Vue 語法開發原生應用（需要結合React Native）。
-
Quasar Framework：一個構建跨平臺桌面和移動應用的開源框架。
-
1-2? ??
Vue Native 是一個框架，它允許開發者使用 JavaScript 來構建跨平臺的原生移動應用。它是基于 React Native 的封裝，所以利用 Vue Native，你可以實現React Native的所有功能。這個框架特別之處在于它結合了 Vue.js 的簡潔性和 React Native 的廣泛適用性，讓你能以 Vue.js 的語法構建iOS和Android的移動應用
1-3-1? 什么是Quasar？
Quasar（發音為/kwe?.zɑ?/)是MIT許可的開源框架（基于Vue），可幫助Web開發人員創建：
- 響應式網站
- PWA（Progressive Web App）
- 通過Apache Cordova構建移動APP（Android，iOS，…）
- 多平臺桌面應用程序（使用Electron）
Quasar允許開發人員編寫一次代碼，然后使用相同的代碼庫同時部署為網站、PWA、Mobile App和Electron App。使用最先進的CLI設計應用程序，并提供精心編寫，速度非常快的Quasar Web組件。
當使用Quasar時，你不需要像Hammerjs，Momentjs或Bootstrap這樣的額外重型庫。它擁有這些功能，而且體積很小！
1-3-2
開箱即用。
1-3-3
兩個主題（將有更多）
該框架支持兩種最常用的主題 - Material主題和iOS主題。
1-3-4
通過Quasar CLI提供無與倫比的開發人員體驗
當使用Quasar的CLI時，開發人員將受益于：
- 無論是網站，PWA，移動APP（直接在手機上還是在仿真器上）或Electron應用程序，更改應用程序源代碼時，都會進行狀態保持熱重載。開發人員只需更改他們的代碼，就可以看到應用即時更新，而不需要任何頁面刷新。
- 狀態保持編譯錯誤覆蓋。
- 使用ESLint進行Lint-on-save - 如果開發人員只喜歡使用他們的代碼
- ES6代碼轉譯
- Sourcemaps
- 更改構建選項不需要手動重新加載開發服務器
- 更多領先的開發工具和技術
1-3-5
底層技術
VueBabelWebpackCordovaElectron
除了Vue(需要半天的時間就能學會并永遠改變你)，你并不需要知道其他技術。他們中的大多數都已集成并已為您配置。
Cordova提供了一組設備相關的API，通過這組API，移動應用能夠以JavaScript訪問原生的設備功能，如攝像頭、麥克風等。Cordova還提供了一組統一的JavaScript類庫，以及為這些類庫所用的設備相關的原生后臺代碼
Electron的正確讀法應該是[i?lektr?n]? ?使用 JavaScript、HTML 和 CSS 構建跨平臺桌面應用程序
-
2? ? .使用服務端渲染（SSR）或靜態站點生成（SSG）：
-
Nuxt.js（Vue.js 的 SSR 框架）
-
Gridsome（基于 Vue.js 的 SSG 框架）
-
2-1.服務端渲染又稱SSR（Server Side Render）實在服務端完成頁面的內容，而不是在客戶端通過AJAX獲取數據
優勢：更好的SEO（搜索引擎），由于搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面
Nuxt.js是一個基于Vue.js的輕量級應用框架，可用來創建服務端渲染（SSR）應用，也可以充當靜態站點引擎生成靜態站點應用。
https://zh.nuxtjs.org
2-2Gridsome 讓開發人員可以輕松地構建靜態生成的網站和應用程序，這些網站和應用程序?天生速度快
? ?2-2-1?
便捷的本地開發
使用
?Vue.js、?GraphQL 等現代工具以及 Node.js 和 JavaScript 生態系統內所有強大的功能來構建網站。在本地開發時，可以立即對任何代碼的更改進行?熱加載（hot-reloading）
2-2-2
天生快速
Gridsome 利用?PRPL 模式將超高性能融入到每個頁面中。代碼拆分、資源優化、圖像漸進加載和鏈接預取功能開箱即用。用 Gridsome 構建的站點在默認配置下就能獲得幾乎完美的頁面速度得分。
2-2-3
基于 Jamstack 技術構建
web 的未來將是 JavaScript、API 和 Markup（標記語言） -?即 Jamstack。Gridsome 利用強大的靜態站點生成技術、JavaScript 和 API 來創建令人驚嘆的現代 web 體驗。
2-2-4
部署簡單、安全
無須服務器、無須數據庫、只有文件。將你的整個站點直接部署到 CDN 上，然后無須費心打理。用 Gridsome 構建的網站可以處理少至幾千多至百萬次的點擊而不會出現故障，并且無須高昂的服務器費用。
Vue 跨平臺性能優化十法
1. v-for 遍歷必須為 item 添加 key，且避免同時使用 v-if
2. 長列表性能優化
? ?純粹的數據展示，不會有任何改變，我們就不需要 Vue 來劫持我們的數據，減少組件初始化的時間，可以通過 Object.freeze 方法來凍結一個對象，一旦被凍結的對象就再也不能被修改了。
export default {data: () => ({users: {}}),async created() {const users = await axios.get("/api/users");this.users = Object.freeze(users);}
};3. vue 組件中的 data 是函數而不是對象
4. 組件懶加載???對于頁面上不是首次加載就需要的組件，可以采用異步組件或路由懶加載的方式，延遲加載它們，提高首屏加載速度
5.合理使用?keep-alive：?對于經常切換的組件，可以使用 keep-alive 緩存組件實例，避免重復創建和銷毀，提高渲染性能。
6.避免頻繁的?Watcher?或深度監聽：?
7.使用異步組件和路由懶加載：
8.利用事件修飾符：?Vue.js 提供了一些方便的事件修飾符，如 .stop、.prevent、.once 等，合理使用它們可以減少不必要的事件監聽和處理。
9緩存重復獲取的數據：?通過合理使用 Vuex 狀態管理庫或本地緩存等方式，避免重復請求和計算相同的數據，提高性能和響應速度。
10.優化計算屬性和監聽器：?盡量避免在計算屬性或監聽器中進行復雜的計算或操作，因為它們會在每次數據變化時都被調用。確保這些函數保持簡單且高效。
)
