问题:在使用 Browserify 时使我的 Vue 实例全局化,以便开发人员工具可用

我开始学习一堆新的前端工具,特别是 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>

代码有效;我可以在绑定的输入对象中输入内容并在标题中看到结果,但我无法访问 Vue 开发工具:

浏览器中缺少开发工具

并且扩展程序肯定已安装并启用:

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 路由器一起使用,并且它们开箱即用。

# javascript # gulp # vue.js
Logo
Vue

Vue社区为您提供最前沿的新闻资讯和知识内容

更多推荐

具身智能测试题解析

问题1:具身智能（Embodied Intelligence）的核心观点强调智能的产生依赖于（ ） 正确答案：B. 智能体与环境的交互以及自身的物理形态 解析：具身智能的核心是 “智能离不开身体与环境的互动”，智能体的物理形态（如机械臂、人形机器人）和与外界的实时交互，是其产生认知、决策能力的基础，区别于纯软件的抽象智能模型。 问题2:以下哪一项是具身智能的典型应用场景？（ ） 正确答案：B.

avatar Vue

播客 | Fathym 关于 Vue 的观点

在科罗拉多州,我们有许多美景。从山顶到山谷和中间的山丘。 谈到 Vue.js,Fathym 是 JavaScript 框架的粉丝。 我们的工程总监 Jeremy Tomlinson 和品牌传播代表 Rich Kurtzman 很高兴成为 8 月中旬 Vue 播客观点的一部分。 在采访中,主持人史蒂夫爱德华兹向我们的团队询问了很多事情,包括: Fathym 是谁以及我们做什么 使用 Azure 和/

avatar Vue

带有浮动 Vue 和 Tailwind 的 Vue 下拉菜单

可用于在 Vue 应用程序中创建工具提示、弹出框和菜单的最流行的库之一是floating-vue。虽然floating-vue提供了一个Dropdown组件,但它的样式和添加其他功能(例如键盘导航)由用户决定。 我们将创建什么 我们将使用floating-vue的Dropdown组件作为基础,然后在顶部添加键盘功能。然后,我们将使用该组件使用 Tailwind 创建一个下拉菜单。 最终结果将类似于

avatar Vue