2

我正在做一个项目，我使用 electron-vue 并使用 bootstrap-vue 使应用程序看起来更好。经过大量调试，我发现更改链接到引导组件道具的数据属性（在父组件中）。它会给我错误消息，告诉我不要改变 props 值，并且它们是只读的。在我看来，代码可以工作并执行，但会在控制台中给我很多错误。当我说它似乎有效时，我的意思是 console.log 和 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，因为只要父组件重新渲染，该值就会被覆盖。相反，使用基于道具值的数据或计算属性。道具被变异：“价值”

但是此代码产生零错误：

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

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

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

4

1 回答 1

0

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

$ 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。除此之外，我认为仅通过查看文件就可以弄清楚。

于 2019-04-23T19:08:22.370 回答