Рубрики
Без рубрики

Разработка рабочего стола для веб-разработчика – часть 2

Давайте продолжим нашу сборку настольного приложения с веб-технологиями. До сих пор у нас есть фронт-концерн … Теги от Vue, Electron Electronic, Tailwindcss, JavaScript.

Давайте продолжим нашу сборку настольного приложения с веб-технологиями. До сих пор у нас есть фронтальная структура Slick для создания пользовательского интерфейса. Давайте давайте убедимся, что мы можем сделать приложение из него, используя электрон . Электрон откроет 3 основных функция, которые мы можем использовать позже: доступ к машине пользователя, доступ к среде узла, а также способность к созданию настроек для разных ОС. Конечно, многое другое, но эти 3 прилипают как разница для меня.

Доступ к машине пользователя

Электрон обеспечит безопасный способ взаимодействия с машиной пользователя через API Отказ С традиционной средой на рабочем столе это тривиально. Это соединяет разрыв импорта между нашим стеком и нашим конечным продуктом.

Доступ к узлу окружающей среды

Электрон также откроет мир Узел на рабочий стол Отказ Независимо от того, как вы относитесь к JavaScript в качестве языка экосистема Agile и Vast. Экосистема узла может двигаться быстрее, чем экосистема на рабочем столе, и это большая победа для нас.

Цель сборки для разных ОС

Разработка приложений по пересечению платформы возможно в родных подходах. Как-то, даже в 2021 году, это все еще может быть болью. Электрон собирается позволить нам написать один раз и построить до разных целей . Это великолепно. Если вы делитесь библиотеками с вашим веб-приложением, вы даже сможете использовать этот код тоже.

Настраивать

Настройка нашего приложения для работы внутри электрона будет немного сложнее, чем установка Vite. Но мы доберемся туда И я сделаю все возможное, чтобы объяснить большие взлеты.

Нам нужно будет добавить несколько зависимостей в наш проект:

➜ yarn add --dev electron electron-builder electron-reloader electron-window-state npm-run-all

Большинство из них довольно самочувствительны на том, что они помогают. Для разъяснения NPM-Run-all Позвольте нам запустить несколько команд в нашем package.json в то же время.

Теперь нам нужен основной файл входа в загрузочный электрон:

➜ touch src/electron.js

В этом файле мы собираемся сделать тяжелую подъем электрона для работы с нашим приложением Vue. Я наткнулся на: Appinteractive/Electer-Vite-Failwind-Starter Отказ Большая часть того, что у меня за Electron.js Я одолжил отсюда. Я пытался упростить столько, сколько мог.

const createWindow = require('./win-helper.js')
const { app } = require('electron')

try {
  require('electron-reloader')(module)
} catch {}

const isDev = !app.isPackaged

let mainWindow

function loadVitePage(port) {
  mainWindow.loadURL(`http://localhost:${port}`).catch((err) => {
    console.log(err)
    setTimeout(() => {
      // do it again as the vite build can take a bit longer the first time
      loadVitePage(port)
    }, 300)
  })
}

function createMainWindow() {
  mainWindow = createWindow('main')
  mainWindow.once('close', () => {
    mainWindow = null
  })

  const port = process.env.PORT || 3000
  if (isDev) {
    loadVitePage(port)
  } else {
    mainWindow.loadFile('dist/index.html')
  }
}

app.once('ready', createMainWindow)
app.on('activate', () => {
  if (!mainWindow) {
    createMainWindow()
  }
})
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

Я собирался пробежать через какую зависимость – что-то, но этот пост мог пройти весь день. Что делает этот файл:

  • Загрузка наших Окно хелпер
  • Загрузка электрон
  • Загрузка индекса VUE приложения в наше окно
  • Утилиты окон для приложения при открытии

Вы могли бы просто запустить это через Vite и Электрон Команды, но это станет старой быстрой. Вот почему NPM-Run-all это зависимость. Если мы изменим Скрипты Раздел нашего package.json к:

  "scripts": {
    "dev": "run-p dev:*",
    "dev:vite": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "dev:electron": "electron src/electron.js"
  },

Теперь, если мы хотим запустить электрон в режиме Dev, все, что нам нужно сделать, это сделать:

yarn dev

Успех!!! Довольно круто. Мы начинаем строить базу, чтобы сделать что-то круто для рабочего стола. На данный момент в серии не имеет смысла говорить о том, как построить с электроном. Поэтому мы будем решать это позже, так как у нас еще есть много разработок.

Следующий

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

Справка

github repo – часть 2

Оригинал: “https://dev.to/douggrubba/desktop-development-for-the-web-developer-part-2-34o4”

Читайте ещё по теме: