Использование компонентов bootstrap-vue в проекте electronic-vue дает ошибку при изменении свойства данных - PullRequest
1 голос
/ 19 апреля 2019

Я работаю над проектом, в котором я использую Electron-Vue, и чтобы приложение выглядело лучше, я использую Boosttrap-Vue.После многих отладок я обнаружил, что изменение свойства данных (в родительском компоненте), связанного с подпрограммами компонентов начальной загрузки.Это даст мне сообщения об ошибках, говорящих мне не изменять значения реквизитов, и что они только для чтения.Как мне кажется, код работает и выполняется, но выдаст мне много ошибок в консоли.Когда я говорю, что это работает, я имею в виду, что и console.log, и визуально в компоненте начальной загрузки, похоже, корректно изменяют переменные.

После написания множества тестовых случаев я обнаружил, что изменениеСвойство data не выдает ошибку.Но при изменении свойства данных, связанного с подпрограммой компонента начальной загрузки, оно будет.

Тестовый пример, показывающий, где отображаются эти сообщения об ошибках, приведен в следующем коде:

<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 для подобных проблем и посмотреть на документ дляи электрон-вю, и бутстрап-вю, и не могу найти ничего, что помогло бы мне.Кто-нибудь сталкивался с той же проблемой или нашел решение, как избавиться от этих ошибок?

1 Ответ

0 голосов
/ 23 апреля 2019

Итак, после многих головных болей я наконец нашел способ избежать всех этих предупреждений и ошибок.Когда я инициализировал проект, я использовал эти команды:

$ 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, но если вы получаете сообщение об ошибке пропуска пакета, просто используйте npm install <> чтобы установить его.

Теперь мне пришлось переместить каждый файл .vue в новый проект и проверить правильность всех операторов импорта, а затем снова импортировать и использовать загрузчик в index.js.

Если вы используете vue-router, vuex или vuex-Electron, их также необходимо переместить и установить заново.Это должно быть просто, чтобы переместить файлы в новый проект и проверить, где они были импортированы в старые файлы, и скопировать их.

Мне показалось, что команда vue init сделала что-то, что загрузчикПакет -vue не нравится.У меня не было очень большого проекта, поэтому весь процесс занял около 15-20 минут.

Для запуска сервера автоматического обновления используйте команду npm run electron:serve и команду npm run electron:build для создания проекта.,Эти команды можно изменить в файле package.json.

Структура папок немного отличается, больше не будет рендерера и основной папки.Все будет в папке src.Файл main.js из главной папки теперь называется background.js.Кроме того, я думаю, что это достаточно похоже, чтобы разобраться, просто просматривая файлы.

...