使用Browserify时使我的Vue实例全局化,以便开发人员工具可用
Chr*_*itz 4 javascript google-chrome browserify gulp vue.js
我开始学习一些新的前端工具,特别是Vue.js,Gulp,Node,Babel和Browserify.
我已经完成了所有工作,但我遇到了一个问题,我为我的应用程序创建的Vue实例不是全局的,因此(我假设)我无法访问我的浏览器的Vue devtools.
在我的gulpfile中,我有一个捆绑javascript应用程序的任务:
gulp.task('build-js', function (){
return browserify('src/javascript/app.js')
.transform(babelify, { presets: ['es2015'] })
.bundle()
.on('error', function (e){
console.log(e.message);
this.emit('end');
})
.pipe(source('bundle.js'))
.pipe(gulp.dest('public/javascript'));
});
在我的app.js文件中,我像这样实例化我的Vue实例:
var Vue = require('vue');
Vue({
el: '#app',
data:{
message: 'Worked!!!'
}
});
作为测试,相关的html看起来像这样index.html:
<body>
<div id="app">
<h1>{{ message }}</h1>
<input v-model='message'></input>
</div>
<script type="text/javascript" src="javascript/bundle.js"></script>
</body>
代码有效; 我可以键入我的绑定输入对象并查看标题中镜像的结果,但我无法访问Vue devtools:
并且扩展名已经安装并启用:
我一直在寻找周围的解决方案,并已看到帖子里的人说的Vue分配给window或global对象,但结合了Vue的图书馆,不是我的特定实例.
有没有办法让我的Vue实例全局化？我误解了这应该如何运作？
如果将创建的vue实例分配给window对象,它应该工作:
var vm = new Vue({
el: '#app',
data:{
message: 'Worked!!!'
}
});
window.vue = vm
至于vue devtools,我不确定它们是如何为特定的vue实例激活的,到目前为止我已经将它们与vue路由器一起使用了,它们开箱即用.