使用 Vue DevTools

您可以使用Vue DevTools的独立版本调试NativeScript-Vue应用程序。

为了简化集成，您可以使用nativescript-vue-devtools插件，负责将您的应用程序连接到Vue DevTools。

步骤1：安装依赖项

运行以下命令：

$ cd <project-folder>
$ npm install --save @vue/devtools@^5.3.4 @triniwiz/nativescript-toasty @triniwiz/nativescript-socketio@4.0.1 nativescript-vue-devtools

步骤2：安装nativescript-vue-devtools应用程序中的插件

要将应用程序连接到Vue DevTools，您需要修改main.js（或main.ts).

在代码中，导入nativescript-vue-devtools并使用以下命令告诉NativeScript-VueVue.use().

import VueDevtools from 'nativescript-vue-devtools'
import Vue from 'nativescript-vue'

Vue.use(VueDevtools)

确保在Vue之前导入devtools，否则它可能无法按预期工作。

如果您使用的是真实设备而不是模拟器，请设置host配置选项指向开发计算机的IP。否则，您的设备将无法连接到主机。

Vue.use(VueDevtools, { host: '192.168.1.42' })

步骤3：运行Vue DevTools

在新终端中运行以下命令以启动Vue DevTools：

$ npx vue-devtools

窗户应该打开。NativeScript-Vue应用程序中不需要此窗口中显示的指令，因此请忽略它们。

步骤4：重建并运行您的应用程序

运行以下命令：

$ rm -rf platforms
$ tns run android
$ # or
$ tns run ios

如果你的机器和应用程序配置正确，你应该在Vue DevTools的组件树中看到一些组件。

故障排除

在Android API 28级及以上版本上，默认情况下会禁用明文流量。为了连接到Vue DevTools，您必须添加android:usesCleartextTraffic="true"到App_Resources/Android/src/main/AndroidManifest.xml文件：

<application
 <!-- ... -->
 android:usesCleartextTraffic="true"
 <!-- ... -->
</application>

更改后，删除platforms文件夹，并重建应用程序。Vue DevTools现在应该会自动连接。