标签: vue-devtools

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

Run Code Online (Sandbox Code Playgroud)

wepack.mix.js

const mix = require("laravel-mix");

mix.js("resources/js/app.js", "public/js")
    .vue()
    .postCss("resources/css/app.css", "public/css", [
        require("postcss-import"),
        require("tailwindcss"),
        require("autoprefixer"),
    ])
    .webpackConfig(require("./webpack.config"));

if (mix.inProduction()) {
    mix.version();
} …

Run Code Online (Sandbox Code Playgroud)

inertiajs laravel webpack vue.js vue-devtools

Ash*_*er2

lucky-day

8
推荐指数

2
解决办法

3169
查看次数

如何在生产模式下为Chrome扩展启用Vue devtools？

我正在构建一个chrome扩展,并使用vue-cli webpack配置.我想在运行npm run build命令后能够使用vue devtools .

我试图添加Vue.config.devtools = true;main.js,或者更改NODE_ENV: '"production"'为NODE_ENV: '"development"',但vue devtools仍未显示.

如何在生产模式下启用vue devtools？

google-chrome-extension google-chrome-devtools vue.js vue-devtools

Ale*_*mov

2018 03-22

7
推荐指数

1
解决办法

1万
查看次数

从VueJS组件发出重复事件

当我的鼠标光标进入并离开我的VueJS组件时,分别调用以下方法.

光标进入和离开组件时调用的方法:

// located in "methods" section of my Vue component file

onMouseEnter() {
    window.Event.$emit("mouse-entered", this.index);
    console.log("Mouse entered");
},
onMouseLeave() {
    window.Event.$emit("mouse-left", this.index);
    console.log("Mouse left");
},

Run Code Online (Sandbox Code Playgroud)

预计,当我的光标进入并离开组件时,这就是我的控制台的样子(每次发出一个事件):

然而,真正奇怪的是,在Vue开发工具中,我看到每次光标进入并离开组件时都会发出重复事件:

鉴于这种相互矛盾的信息,我不确定该相信什么.刷新页面有时会消除开发工具中的重复事件,但我总是在我的控制台中获得单个唯一的事件,这是我想要的行为.

有谁知道这里发生了什么,我应该接受什么作为真相的来源？

下面是我的main.js文件中声明和初始化我的Vue实例的方法:

// As far as I can tell, duplicated Vue instances are not being created here on page refresh

let app;

// global event bus
window.Event = new Vue();
console.log("Event bus created");

/* This section ensures the firebase auth object isn't in …

Run Code Online (Sandbox Code Playgroud)

javascript event-bus vue.js vuejs2 vue-devtools

use*_*888

2018 07-22

7
推荐指数

1
解决办法

1776
查看次数

强制使用旧版本的 vuejs devtools 或下载旧版本

最近 vue devtools 更新到了新版本。我大量使用 devtools 来检查我的 vuex 商店。更新后数据就不再显示了。数据在突变后更新，但未显示在开发工具中。

有谁知道如何再次使用旧版本吗？

提前致谢！

vue.js vue-devtools

Kim*_*der

lucky-day

7
推荐指数

1
解决办法

2848
查看次数

Vue.js 开发工具未显示

突然间，我的 Vue.js devtools 停止工作了。我在 chrome 中使用了大约 2 年（自从我开始开发 Vue.js）。现在我在 chrome 中看不到 devtools。昨天就这样发生了——我使用了一段时间的 devtools，然后我在做其他事情，过了一段时间，我注意到了一些东西——devtools 不见了。即使扩展说 devtools 有效：

为什么它不是“我的”问题：

我用了 2 年没有问题，直到现在
它在早上工作，然后它“只是”停止了
现在它不适用于任何项目，即使我以前知道它也有效
我没有使用生产模式、缩小版本等......我通过 webpack 编译它并且以前工作过。
即使在简单新鲜的 Vue.js 应用程序上它也不起作用 *

为什么我到目前为止尝试过：

硬刷新网站（当然是关闭并重新打开 devtools）
重新启动浏览器
重新安装扩展
试过这个版本和这个错误修正版本
从帐户注销并登录
启用扩展的所有设置：

操作系统：macOS Catalina 10.15.4 (19E287)

浏览器：83.0.4103.61

Vue.js 开发者工具：5.3.3

* 新的 Vue.js 应用代码如下所示：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{ message …

Run Code Online (Sandbox Code Playgroud)

google-chrome devtools vue.js vuejs2 vue-devtools

deb*_*ute

lucky-day

7
推荐指数

1
解决办法

7913
查看次数

VueJS组件不会渲染,直到我在Vue Devtools中单击它

我在博客后端的一个部分(而不是SPA)上使用VueJS 2.5.3进行API调用以检查附加到帖子的特色图像.

如果找到一个,它使用子组件来显示图像.问题是在API调用成功后子组件没有呈现,因此图像对象也没有传递给它.

正如您在此GIF中看到的那样,子组件未呈现,我v-if在其上检查图像是否存在.但是,如果我单击Vue DevTools中的子组件,子组件将呈现并按预期显示图像.

我的问题是为什么只有在Vue Devtools中点击它后,子组件才会呈现？当您单击某个组件时,Vue Devtools会触发某种事件吗？

这是子组件:

<template>
    <div v-if="showImage" class="featured-image-container" :class="[ size ]">
        <img :src="processedSrc" alt="Featured Image">
    </div>
</template>

<script>
export default {
    props: {
        image: {
            type: Object
        },
        size: {
            type: String,
            required: true
        }
    },
    data () {
        return {
            showImage: false
        }
    },
    computed: {
        processedSrc: function () {
            if (this.image && typeof this.image === 'object') {
                this.showImage = true
                return this.image.sizes[this.size].file
            } else {
                this.showImage = false …

Run Code Online (Sandbox Code Playgroud)

vue.js vuejs2 vue-devtools

ATL*_*ris

2017 11-07

6
推荐指数

1
解决办法

1810
查看次数

Nativescript Vue开发人员工具无法正常工作

我正在按照此处说明的指南进行操作：https : //nativescript-vue.org/en/docs/getting-started/vue-devtools/

I have the dev tools and the app up and running but the dev tools says "Waiting for connection..." while the app is already running on my android emulator.

How can I fix this?

vue.js nativescript vue-devtools nativescript-vue

Sin*_*met

lucky-day

5
推荐指数

1
解决办法

190
查看次数

Firefox 中的 Vue 开发工具未检测到 Vue 3 应用程序

大家好，我正在Firefox 浏览器中使用Vue 开发工具。Vue devtools 在Vue 2.6.12应用程序上完美检测。但它没有在Vue 3.0.0应用程序上检测到。如何解决这个问题。谢谢

javascript firefox vue.js vue-devtools vuejs3

Din*_*dhu

lucky-day

5
推荐指数

1
解决办法

8134
查看次数

标签统计

vue-devtools ×10

vue.js ×10

vuejs2 ×4

javascript ×2

devtools ×1

event-bus ×1

firefox ×1

google-chrome ×1

google-chrome-devtools ×1

google-chrome-extension ×1

inertiajs ×1

laravel ×1

nativescript ×1

nativescript-vue ×1

vuejs3 ×1

vuex ×1

webpack ×1

应用程序.js

wepack.mix.js

标签 统计

标签统计