Vue 3.0 Mobile

#介绍

虽然 Vue.js 本身并不支持移动应用开发，但是有很多解决方案可以用 Vue.js 创建原生 iOS 和 Android 应用。

#混合应用开发

#Capacitor

Capacitor 是一个来自 Ionic Team 的项目，通过提供跨多个平台运行的 API，开发者可以使用单个代码库构建原生 iOS、Android 和 PWA 应用。

资源

• Capacitor + Vue.js Guide

<template> <div> <h1>Geolocation</h1> <p>Your location is:</p> <p>Latitude: {{ loc.lat }}</p> <p>Longitude: {{ loc.long }}</p> <button @click="getCurrentPosition"> Get Current Location </button> </div> </template> <script> import { defineComponent, ref } from 'vue'; import { Geolocation } from '@capacitor/geolocation'; export default defineComponent({ setup() { const loc = ref<{ lat: null | number; long: null | number; }>({ lat: null, long: null, }); const getCurrentPosition = async () => { const pos = await Geolocation.getCurrentPosition(); loc.value = { lat: pos.coords.latitude, long: pos.coords.longitude, }; }; return { getCurrentPosition, loc }; }, }); </script>

#NativeScript

NativeScript 使用已熟悉的 Web 技能为跨平台（真正的原生）移动应用提供支持。两者结合在一起是开发沉浸式移动体验的绝佳选择。