vuejs2 - 在electronic-vue项目中使用boots-vue组件会导致数据属性更改错误

Question

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

在编写了许多测试用例之后，我发现更改数据属性不会产生错误。但是，当更改链接到引导组件prop的数据属性时，它会。

下面的代码显示了一个测试案例，这些案例显示了这些错误消息的出现位置:

<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 ，因为无论何时值都会被覆盖
父组件重新渲染。而是使用数据或计算属性
根据 Prop 的值(value)。变异的 Prop :“值”

但是此代码产生零错误:

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

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

我曾尝试使用google来解决类似的问题，并查看doc中的electronic-vue和bootstrap-vue，但找不到任何对我有帮助的东西。是否有人遇到相同的问题或对如何消除这些错误有解决方案？

Answer 1

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

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

在提出了使用vue-cli重新初始化项目并在之后添加 Electron 插件的建议之后(此人创建了一个快速项目，没有问题)。因此，当再次初始化项目时，我使用了以下命令:

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文件移至新项目，并检查所有import语句是否正确，然后在index.js中再次导入并使用 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。除此之外，我认为仅浏览文件就足够了。