С данной заметки начинаю публиковать часто применяем методы и функции из Electron API. Для начала рассмотрим объект app, его можно назвать главным объектом фреймворка отвечающим за все основные события которые происходят в приложении начиная с его создания и заканчивая полной выгрузкой из памяти компьютера.
Эта заметка будет посвящена полезным настройкам и инструментам, которые можно использовать в фреймворке Electron.js. Ниже приведен список дополнительных инструментов для создания приложения:
1. Для нативной работы с модулями Node.js устанавливаем глобально – windows-build-tools
1 2 3 | npm install --global --production windows-build-tools // or yarn global add windows-build-tools |
2. В проект добавляем electron-reload – позволяет обновлять окно без перезапуска проекта. Если используем Electron совместно с React CRA или Vue CLI данный модуль не нужен
1 2 3 4 | yarn add --dev electron-reload // в main.js прописываем строку require('electron-reload')(__dirname); |
Начинаю серию заметок посвященных отличному фреймворку Electron.js, позволяющему строить десктопные приложения для MacOS, Linux и Windows, используя только HTML, CSS и JavaScript. Сайт фреймворка находится по адресу https://electronjs.org/.
В качестве основы для материалов заметок послужат, видео-курс Master Electron: Desktop Apps using HTML, JavaScript & CSS и книга Electron in Action, а так же видео Steve Kinney автора данной книги. Если серьезно решили изучить Electron, советую ознакомиться с данным курсом и книгой. Как обычно здесь я лишь представлю свои конспекты, которые появятся по мере изучения.
Для начала на компьютере должны быть установлены Git, Node.js и желательно Yarn.
В рассмотренном ранее примере построении приложения, используя компоненты мы применяли простой метод их переключения, если нужно показывать компоненты не все сразу на странице, а только по требованию. В новом варианте для этой цели я использовал Vue Router, обладающий большим количеством преимуществ. Представленный пример не является полноценно действующим приложением, но позволяет разобраться, как можно строить сложные и многоуровневые конструкции из компонентов используя маршрутизацию построенную на возможностях которые дает библиотека Vue Router.
Продолжим знакомство с библиотекой – Vue Router, которая является неотъемлемым дополнением для Vue.js. В следующем примере собрана конструкция, в которой используются именованные маршруты, а не указания путей в
Заметка посвящена еще одной замечательной библиотеке – Vue Router, которая является неотъемлемым дополнением для Vue.js. В приведенном примере собрана конструкция позволяющая менять на странице отображение компонентов в зависимости от желания пользователя. Переключение отображения производится кликом по пунктам меню.