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.