使用 Browserify 时使我的 Vue 实例成为全局实例,以便开发人员工具可用
Making my Vue instance global when using Browserify so the developer tools are available
我开始学习一堆 new-to-me 前端工具,特别是 Vue.js、Gulp、Node、Babel 和 Browserify。
一切正常,但我 运行 遇到一个问题,我为我的应用程序创建的 Vue 实例不是全局的,因此(我假设)我无法访问我的浏览器的 Vue 开发工具。
在我的 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>
代码有效;我可以输入我的绑定输入 object 并在标题中看到镜像的结果,但我无权访问 Vue devtools:
并且肯定安装并启用了扩展:
我一直在四处寻找解决方案,看到有人说要将 Vue 分配给 window
或 global
objects,但这绑定了 Vue 库,不是我的特定实例。
有没有办法让我的 Vue 实例成为全局实例?我是不是误解了它应该如何工作?
如果将创建的 vue 实例分配给 window 对象,它应该可以工作:
var vm = new Vue({
el: '#app',
data:{
message: 'Worked!!!'
}
});
window.vue = vm
至于 vue devtools,我不确定它们是如何为特定的 vue 实例激活的,到目前为止,我已经将它们与 vue router 一起使用并且它们开箱即用。
确保遵循 documentation 中的这些注释:
vue-devtools 仅适用于 Vue.js 1.0.0+.
对于 Vue 版本 < 1.0.16,devtool 将仅适用于 Vue 的开发(非缩小)版本,因为 devtools 挂钩在生产构建中被剥离。这还包括由 Webpack 和 Browserify 在生产模式下生成的构建。 Vue >= 1.0.16 在所有情况下都可以使用开发工具。
要使其适用于通过 file:// 协议打开的页面,您需要在 Chrome 的扩展程序管理面板中检查 "Allow access to file URLs" 此扩展程序。
我开始学习一堆 new-to-me 前端工具,特别是 Vue.js、Gulp、Node、Babel 和 Browserify。
一切正常,但我 运行 遇到一个问题,我为我的应用程序创建的 Vue 实例不是全局的,因此(我假设)我无法访问我的浏览器的 Vue 开发工具。
在我的 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>
代码有效;我可以输入我的绑定输入 object 并在标题中看到镜像的结果,但我无权访问 Vue devtools:
并且肯定安装并启用了扩展:
我一直在四处寻找解决方案,看到有人说要将 Vue 分配给 window
或 global
objects,但这绑定了 Vue 库,不是我的特定实例。
有没有办法让我的 Vue 实例成为全局实例?我是不是误解了它应该如何工作?
如果将创建的 vue 实例分配给 window 对象,它应该可以工作:
var vm = new Vue({
el: '#app',
data:{
message: 'Worked!!!'
}
});
window.vue = vm
至于 vue devtools,我不确定它们是如何为特定的 vue 实例激活的,到目前为止,我已经将它们与 vue router 一起使用并且它们开箱即用。
确保遵循 documentation 中的这些注释:
vue-devtools 仅适用于 Vue.js 1.0.0+.
对于 Vue 版本 < 1.0.16,devtool 将仅适用于 Vue 的开发(非缩小)版本,因为 devtools 挂钩在生产构建中被剥离。这还包括由 Webpack 和 Browserify 在生产模式下生成的构建。 Vue >= 1.0.16 在所有情况下都可以使用开发工具。
要使其适用于通过 file:// 协议打开的页面,您需要在 Chrome 的扩展程序管理面板中检查 "Allow access to file URLs" 此扩展程序。