在 webpack-simple Vue.js 模板中，如何从控制台访问 Vue 应用程序？

Question

我使用 vue-cli 和 webpack-simple template, and it works great. In the provided main.js 创建了一个 Vue.js 应用程序，我将 new Vue(... 行更改为 var vm = new Vue(...，这样我就可以从 Chrome 开发控制台访问 Vue 实例，但变量 vm 仍然显示为未定义。

我获取对 Vue 对象的引用的正确方法是什么，以便我可以在组件中手动生成事件，或从控制台手动修改数据？

Answer 1

试试 window.vm = vm;

var vm  = new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

window.vm = vm;

而不只是在控制台中输入 vm。您的 Vue 对象现在可用。

Answer 2

另一种选择是：

不要修改vue-cli生成的main.js/main.ts
安装 Vue.js devtools（适用于 Firefox 和 Chrome）
在您的 Vue 网站上按 F12（打开开发控制台）并转到 Vue 选项卡
每个组件都分配给您可以在控制台中使用的 $vmX 变量。

在 webpack-simple Vue.js 模板中，如何从控制台访问 Vue 应用程序？

In the webpack-simple Vue.js template, how can I access the Vue app from the console?

vue.js

vuejs2