Electron - это платформа приложений, позволяющая нам создавать настольные приложения на основе веб-приложений.

Vuetify позволяет нам создавать веб-приложения с помощью Material Design.

Мы можем использовать генератор vue-cli-plugin-electronics-builder для создания приложения Electron на основе Vue.js.

В этой статье мы рассмотрим, как создать простое приложение Electron Vue с Vuetify и Electron.

Начиная

Мы можем создать наш проект Vue, запустив:

npx vue create .

после перехода в папку нашего проекта.

Следуем инструкциям по созданию проекта Vue.

Затем в папке проекта запускаем:

vue add electron-builder

Как только мы это сделали, мы добавляем Vuetify в наше приложение Vue, запустив:

vue add vuetify

Теперь весь шаблонный код добавлен за нас.

Затем мы запускаем:

npm run electron:serve

or

yarn electron:serve

для предварительного просмотра нашего приложения.

Написание кода

Теперь можно создать наше приложение с помощью Vuetify.

Мы можем создать простое приложение, добавив в App.vue следующее:

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />
    <span class="mr-2">App</span>
      </div>
    </v-app-bar>
    <v-main>
      <v-form v-model="valid" @submit.prevent="add">
        <v-container>
          <v-row>
            <v-col cols="12" md="6">
              <v-text-field v-model="title" :rules="rule" label="book title" required></v-text-field>
            </v-col>
            <v-col cols="12" md="6">
              <v-text-field v-model="author" :rules="rule" label="book author" required></v-text-field>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="12">
              <v-btn text type="submit" color="primary">add</v-btn>
            </v-col>
          </v-row>
        </v-container>
      </v-form>
      <v-simple-table>
        <template v-slot:default>
          <thead>
            <tr>
              <th class="text-left">title</th>
              <th class="text-left">author</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(b, i) in books" :key="b.id">
              <td>{{ b.title }}</td>
              <td>{{ b.author }}</td>
              <td>
                <v-btn text color="primary" @click="remove(i)">remove</v-btn>
              </td>
            </tr>
          </tbody>
        </template>
      </v-simple-table>
    </v-main>
  </v-app>
</template>
<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data: () => ({
    title: "",
    author: "",
    rule: [(v) => !!v || "required"],
    valid: false,
    books: [],
  }),
  methods: {
    add() {
      if (!this.valid) {
        return;
      }
      const { title, author } = this;
      this.books.push({
        id: uuidv4(),
        title,
        author,
      });
    },
    remove(index) {
      this.books.splice(index, 1);
    },
  },
};
</script>

Мы создали приложение-книгу с формой и таблицей.

v-app-bar - это верхняя панель приложения.

v-main содержит основное содержание приложения.

v-form создает форму.

Атрибут v-model в форме имеет состояние проверки формы.

Директива @submit.prevent ожидает отправки события отправки.

prevent вызывает preventDefault неявно.

Внутри формы у нас есть v-text-field для добавления текстового поля.

v-model привязывается к состояниям модели.

В опоре rules есть правила проверки формы.

Правила определяются с помощью массива функций с введенным значением в качестве параметра.

Таблица создается с помощью компонента v-simple-table.

И мы заполняем слот default обычными элементами таблицы.

В объекте methods у нас есть метод add, позволяющий добавлять записи в this.books.

Проверяем правильность данных формы с помощью свойства this.valid.

Уникальный идентификатор создается для каждой записи с пакетом uuid.

Нам нужен уникальный идентификатор для свойства key в таблице, чтобы элементы отображались правильно.

Мы устанавливаем это, запустив:

npm i uuid

Также у нас есть метод remove для удаления элементов по их индексу.

Теперь у нас должна быть возможность добавлять и удалять элементы по своему желанию.

Создайте наше приложение

Чтобы встроить наше приложение в исполняемый файл, мы запускаем:

yarn electron:build

пряжей или:

npm run electron:build

с NPM.

Заключение

Мы можем создать красивое настольное приложение Vue с помощью Vuetify, Vue и генератора кода vue-cli-plugin-electronic-builder.