首页 文章

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

提问于
浏览
2

我使用 vue-cliwebpack-simple template创建了一个Vue.js应用程序,它运行得很好 . 在provided main.js中,我将 new Vue(... 行更改为 var vm = new Vue(... ,以便我可以从Chrome开发者控制台访问Vue实例,但变量 vm 仍然显示为未定义 .

对于我来说,获取对Vue对象的引用的正确方法是什么,以便我可以执行诸如在组件中手动生成事件或从控制台手动修改数据等操作?

2 回答

  • 9

    试试 window.vm = vm;

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

    而不仅仅是在控制台中键入 vm . 您的Vue对象现在可用 .

  • 0

    另一种选择是:

    • 不要修改vue-cli生成的main.js / main.ts

    • 安装Vue.js devtools(适用于Firefox和Chrome)

    • 在Vue驱动的网站上按 F12 (打开开发控制台)并转到 Vue 标签

    • 每个组件都被分配到$ vmX变量,您可以在控制台中使用它 .

    enter image description here

相关问题