手记

告别 uni-app!Vue3 原生 App 开发框架正式登场

长久以来,“用 Vue 3 开发真正的原生 App” 一直是技术领域的短板。

uni-app 虽然宣传"一套代码多端运行",但其性能瓶颈厂商锁定以及原生能力不足的问题常被开发者诟病。

整个 Vue 生态始终缺少一个能与 React Native 相媲美的"真正原生"跨平台解决方案。

直到 NativeScript-Vue 3 出现,并获得了 尤雨溪 本人的公开认可。

为何现在可以告别了?

uni-app 现状 开发者痛点
渲染层基于 WebView 或弱原生混合 启动缓慢、画面掉帧、长列表卡顿
自定义原生 SDK 需编写大量 renderjs / plus 桥接代码 维护成本高,升级易出现断裂
依赖 DCloud 生态 对工程化、VitePinia 等新工具支持缓慢
Vue 3 的支持滞后,Composition API 兼容性差 类型推断、生态插件使用中频繁遇到问题

“我们需要的只是一个 Vue 语法 + 真正原生渲染 + 社区插件开箱即用 的解决方案。”
——这正是 NativeScript-Vue 所提供的答案。

尤雨溪的推特支持

2025-10-08Evan You 转发了 NativeScript 的官方推文:

“立即尝试 Vite + NativeScript-Vue —— 支持 HMR原生 API实时重载。”

配图展示了一段使用 <script setup> 和 TypeScript 的实际 Demo,这意味着:

  • 完整的 Vue 3 语法支持(Composition API
  • Vite 提供的秒级热重载
  • 可直接调用 iOS / Android 原生 API

获得框架创始人的公开推荐,无疑为开发者社区注入了强大信心。

NativeScript-Vue 是什么?

简而言之:Vue 的自定义渲染器 + NativeScript 原生引擎

  • 运行时不依赖 WebView,JavaScript 在 V8 / JavaScriptCore 中执行
  • <template> 标签直接编译为原生 UILabel / android.widget.TextView
  • 支持 NPM、CocoaPods、Maven/Gradle 等全部原生依赖
  • 具备与 React Native 同等的性能,同时提供完整的 Vue 开发体验

5 分钟快速上手

1. 环境配置(一次性完成)

# 需 Node ≥ 18 版本
npm i -g nativescript
ns doctor                # 根据提示安装 JDK / Android Studio / Xcode
# 所有检查项显示通过即可

2. 创建项目

ns create myApp \
  --template @nativescript-vue/template-blank-vue3@latest
cd myApp

项目模板已内置 Vite + Vue 3 + TypeScript + ESLint 开发环境

3. 运行与调试

# 可选择真机或模拟器运行
ns run ios
ns run android

保存文件后即可实现毫秒级热更新console.log 输出将直接显示在终端中。

4. 项目结构概览

myApp/
├─ app/
│  ├─ components/          // 单文件 .vue 组件
│  ├─ app.ts               // createApp() 入口
│  └─ stores/              // Pinia 状态管理
├─ App_Resources/
└─ vite.config.ts          // 已配置 nativescript-vue-vite-plugin

5. 构建发布

ns build android --release   # 生成 .aab 或 .apk 文件
ns build ios --release       # 生成 .ipa 文件

支持签名配置多渠道打包自动版本号管理,完全遵循原生应用发布流程,便于持续集成。

Vue 3 生态插件兼容性一览

插件 是否可用 说明
Pinia 无需修改,直接使用 app.use(createPinia())
VueUse ⚠️ 仅支持不依赖 DOM的工具函数
vue-i18n 9.x 经测试可正常使用
Vue Router 建议使用 NativeScript 页面导航,如 $navigateTo(Page)
Vuetify / Element Plus 依赖 CSS 与 DOM,无法在原生环境中渲染

兼容性检测技巧:

npm i xxx
grep -r "document\|window\|HTMLElement" node_modules/xxx || echo "插件大概率可用"

调试利器:Vue DevTools 支持

NativeScript-Vue 3 现已提供 官方 DevTools 插件

  • 支持实时查看 组件树PropsEventsPinia 状态
  • 沿用桌面端调试习惯,无需额外学习成本

插件生态与原生能力

  • 可使用 700 余个 NativeScript 官方插件
    例如:ns plugin add @nativescript/camera | bluetooth | sqlite...

  • 支持直接引入 iOS/Android SDK
    通过 CocoaPodsMaven 简单配置即可:

    // 调用原生 CoreBluetooth
    import { CBCentralManager } from '@nativescript/core'
    
  • 支持 自定义视图与动画
    注册后即可在 <template> 中使用,体验与 React Native 组件开发一致

总结:Vue 开发者的原生移动方案

React Native 依托 Facebook 支持,FlutterGoogle 强力推动,
而如今,Vue 3 也拥有了自己的 真正原生跨平台解决方案 —— NativeScript-Vue

该框架使 Vue 语法首次能够 完整、无损、高性能 地运行于 iOSAndroid 平台,
并获得了 尤雨溪 的公开认可,以及 Vite 官方生态的集成支持。

选择 NativeScript-Vue
可同时实现 性能表现、原生能力与工程化体验 的平衡,
让你继续使用熟悉的 .vue 文件,开发功能强大的移动应用。

0人推荐
随时随地看视频
慕课网APP