Question

我正在开发一个使用electronic-vue的项目，为了使应用程序看起来更好，我使用了bootstrap-vue。经过大量调试后，我发现更改了与引导程序组件道具链接的数据属性（在父组件中）。它会给我错误消息，告诉我不要更改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是只读的
避免直接更改道具，因为无论何时值都会被覆盖父组件重新渲染。而是使用数据或计算属性根据道具的价值。道具被突变：“值”

但是此代码产生零错误：

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

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

我曾尝试使用google来解决类似问题，并查看了有关电子战和自举战的文档，但找不到任何对我有帮助的东西。是否有人遇到相同的问题或对如何消除这些错误有解决方案？

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中再次导入并使用引导程序。

如果您使用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。除此之外，我认为仅浏览文件就足够了。

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

1 个答案: