在 electron-vue 项目中使用 bootstrap-vue 组件会导致数据 属性 更改出错

Question

我正在做一个使用 electron-vue 的项目，为了使应用程序看起来更好，我使用了 bootstrap-vue。经过大量调试，我发现更改链接到 bootstrap 组件道具的数据 属性（在父组件中）。它会给我错误消息，告诉我不要改变 props 值，并且它们是只读的。在我看来，代码可以运行并执行，但会在控制台中给我很多错误。当我说它似乎有效时，我的意思是 console.log 和视觉上的 bootstrap 组件似乎都正确地更改了变量。

在写了很多测试用例后我发现改变一个数据属性不会报错。但是当更改链接到 bootstrap 组件道具的数据 属性 时，它会。

显示这些错误消息出现位置的测试用例在下面的代码中：

<template>
    <b-progress :max="maxNumberOfFiles" show-value>
        <b-progress-bar :value="currentNumberOfErrorFiles"
                        :max="maxNumberOfFiles"
                        variant="danger"
                        show-value
                        />
    </b-progress>
</template>

export default {
    data() {
        maxNumberOfFiles: 1,
        currentNumberOfErrorFiles: 0
    },
    methods {
        test: function() {
            currentNumberOfErrorFiles = 1;
        }
    }
}

上面的代码会导致 3 个错误：

• $attrs 是只读的
• $listeners 是只读的
• 避免直接修改 prop，因为值会在任何时候被覆盖 父组件重新渲染。相反，使用数据或计算 属性 基于道具的价值。正在改变的道具："value"

但此代码产生零错误：

<template>
    <progress   :value="currentNumberOfErrorFiles"
                :max="maxNumberOfFiles"
                >
    </progress>
</template>

export default {
    data() {
        maxNumberOfFiles: 1,
        currentNumberOfErrorFiles: 0
    },
    methods {
        test: function() {
            currentNumberOfErrorFiles = 1;
        }
    }
}

我曾尝试使用 google 来解决类似的问题，并查看了 electron-vue 和 bootstrap-vue 的文档，但找不到任何对我有帮助的东西。有没有人 运行 遇到同样的问题或有解决这些错误的方法？

Answer 1

所以在经历了很多头痛之后，我终于找到了一种避免所有这些警告和错误的方法。当我初始化项目时，我使用了这些命令：

$ npm install vue-cli -g
$ vue init simulatedgreg/electron-vue <<project-name>>

在建议使用 vue-cli 重新初始化项目并添加电子插件之后（此人创建了一个快速项目并且没有问题）。所以当再次初始化项目时，我使用了这些命令：

npm install vue-clie -g
vue create <<project-name>>
cd <<project-name>>
vue add electron-builder
npm install bootstrap-vue
npm install

如果我没记错的话，这些就是你需要的所有 npm install 命令，但是如果你得到一个包丢失的错误，只需使用 npm install <> 来安装它。

现在我必须将每个 .vue 文件移动到新项目并检查所有导入语句是否正确，然后在 index.js.[=15 中再次导入和使用 bootstrap =]

如果你使用vue-router、vuex或vuex-electron这些也需要搬过来重新安装。这应该只是将文件移动到新项目并检查它们在旧文件中的导入位置并将其复制过来。

对我来说，vue init 命令似乎做了一些 bootstrap-vue 包不喜欢的事情。我没有一个很大的项目，所以整个过程大约需要 15-20 分钟。

到运行自动更新开发服务器使用命令npm run electron:serve和命令npm run electron:build来构建项目。这些命令可以在 package.json 文件中更改。

文件夹结构有点不同，不再有渲染器和主文件夹。一切都将在 src 文件夹中。主文件夹中的 main.js 现在被命名为 background.js。除此之外，我认为它足够相似，只需浏览文件就可以弄清楚。