要使用Vue Devtools调试NativeScript-Vue应用程序,您需要使用独立版本的Vue Devtools。
为了使集成更容易,我们已经发布了 nativescript-vue-devtools
,它负责连接到Vue Devtools。
1.安装依赖项
$ cd <project-folder>
$ npm install --save @vue/devtools@beta nativescript-toasty nativescript-socketio nativescript-vue-devtools
2.可选择全局安装Vue Devtools
如果您想轻松访问Vue Devtools,最好全局安装它。
$ npm install -g @vue/devtools@beta
这将允许您运行 vue-devtools
命令,而不管您当前所在的目录。
3.将 nativescript-vue-devtools
插件安装到您的应用程序中
要将您的应用程序连接到devtools,您必须对您的应用程序中的main.js
稍作修改 。 导入 nativescript-vue-devtools
并使用Vue.use()
告诉NativeScript-Vue 使用它。
import Vue from 'nativescript-vue'
import VueDevtools from 'nativescript-vue-devtools'
Vue.use(VueDevtools)
4.运行Vue Devtools
$ # if installed globally
$ vue-devtools
$ # or
$ npx vue-devtools
5.重建并运行您的应用程序
$ rm -rf platforms
$ tns run android --bundle
$ # or
$ tns run ios --bundle
如果一切顺利,您应该在Vue Devtools的组件树中看到一些组件。