升级Nativescript 8.1后Nativescript-vue无法识别Tabs组件如何解决

问题原因 #

NativeScript 8.0及以上版本中，原内置的Tabs组件已从@nativescript/core核心包中移除，转为由社区维护的Material组件库提供，且默认未在nativescript-vue中全局注册，因此会出现No known component for element Tabs的报错。NativeScript Playground默认预装了相关依赖并完成注册，所以代码在Playground可正常运行。

环境配置要求&修复步骤 #

• 依赖版本要求：
  • @nativescript/core >= 8.0.0
  • nativescript-vue >= 2.9.0
  • @nativescript-community/ui-material-tabs >= 5.0.0

1. 安装Tabs组件依赖 #

在项目根目录执行以下命令安装组件包：

ns plugin add @nativescript-community/ui-material-tabs

2. 全局注册Tabs相关组件 #

在项目入口文件（通常为app.js/main.js）中添加组件注册代码：

import Vue from 'nativescript-vue'
// 引入Tabs相关组件的Vue适配
import { 
  Tabs, 
  TabStrip, 
  TabStripItem, 
  TabContentItem 
} from '@nativescript-community/ui-material-tabs/vue'

// 全局注册组件
Vue.use(Tabs)
Vue.use(TabStrip)
Vue.use(TabStripItem)
Vue.use(TabContentItem)

3. 清理缓存重新构建 #

执行以下命令清理项目旧构建缓存，避免缓存导致的组件不识别问题：

ns clean
# 清理完成后重新运行项目即可，例：运行iOS端
ns run ios

完成以上步骤后，你现有的Tabs代码无需修改即可正常运行。

内容的提问来源于stack exchange，提问作者naokonakanish