Создайте настольное приложение Vue 3 всего за 5 минут

внешний интерфейс Vue.js

В этой статье мы рассмотрим, как разработать проект рабочего стола Vue 3 с помощью Vite.

будут использованы в проектеElectron, один из самых популярных фреймворков для создания кроссплатформенных настольных приложений с использованием Javascript. Поэтому многие популярные приложения используют Electron, например, VSCode, Slack, Twitch и т. д.

img

Давайте посмотрим, что делать в первую очередь:

img

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

Далее идет процесс разработки.

Базовая программа Vite создана

Начните с создания приложения Vite. Я не буду вдаваться в подробности о том, как здесь работает Vite.

Выполните следующую команду в терминале:

npm init @vitejs/app
cd [project-name]
npm install

Готово, попробуйте сначала в браузере.

Просто запустите в терминалеnpm run devЗаказ. Затем откройте локальный адрес в браузере, вы можете увидеть это:

img

Нет проблем, теперь пришло время добавить Electron в его настройки.

Добавить Electron в проект Vite

здесь следуйтеЭлектрон официальный быстрый стартВнесите некоторые изменения в наше приложение Vite.

Сначала установите Электрон. Введите в терминал следующую команду:

Install Electronnpm install --save-dev electron

Тогда взгляните на руководство Electron.

img

В руководстве сказано, что для простой конфигурации Electron требуется четыре файла:

  1. package.json- это уже есть
  2. main.js
  3. preloader.js
  4. index.html

Похоже проект уже естьmain.jsа такжеindex.htmlфайлы, но это файлы Vite, а не файлы Electron. Файлы Vite можно использовать только для запуска программ Vite, поэтому вам также необходимо предоставить отдельный файл Electron.

main.jsИспользуется для создания настольных программ и загрузки их вindex.html, он также должен включать созданный нами программный код Vite.

Создайте программу Vite

Итак, сначала необходимо создать программу Vite. Чтобы интегрировать его с Electron, необходимо выполнить дополнительную настройку. Мы хотим убедиться, что все ссылки на окончательные файлы javascript и css указывают на правильные пути при сборке проекта.

Создаваемый проект Vite создаст каталог dist со следующей структурой.

img

Но поскольку наш код Electron находится в корне проекта, он должен основывать весь проект на папке dist. в состоянии пройтиpathбиблиотекаvite.config.jsустановить в файлbaseсвойства для достижения.

//vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  base: path.resolve(__dirname, './dist/'),
  plugins: [vue()]
})

Теперь можно запустить в терминалеnpm run buildдля создания каталога dist.

Настройте main.js Electron

Следующим шагом будет создание в корневом каталоге проектаmain.jsдокумент.

img

После создания нам нужно только начать сElectron quick start guideПросто скопируйте и вставьте код.

загрузить в насindex.html, измените его наdist/index.html, чтобы использовать файл в каталоге dist.

такmain.jsОкончательный код в этом:

//main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('dist/index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

Создайте и напишите preload.js.

Далее создадим в корневом каталоге проектаpreload.jsфайл, затем используйте сноваquick start code, на этот раз без необходимости что-либо изменять.

//preload.js
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
})

Изменить package.json

Мы почти закончили, и, наконец, нам нужно внести некоторые изменения в файл package.json, чтобы запускать команды Electron.

Первый, чтобы установитьmainсвойство, по умолчанию Electron будет искать в корневом каталогеindex.jsфайл и выполнить, но так как наш файл называетсяmain.js, так и должно бытьpackage.jsonопределено в.

//package.json
{
  "name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js", // 这一行
  ...
}

Затем установите способ запуска Electron вscriptsраздел, создайте новый файл с именемelectron:startсценарий, содержаниеelectron . .

//package.json
{
  "name": "vite-electron",
  "version": "0.0.0",
  "main": "main.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "electron:start": "electron ." // 这里
  },
  ...
}

Выше весь код.

Наконец выполните в терминале:npm run electron:startкоманда, и тогда вы можете увидеть:

img

Настольная программа наконец завершена, это очень просто~

напиши в конце

Недавно в процессе улучшения Vue я нашел качественный туториал по Vue3+TS. Бесплатно поделиться с копателями,Нажмите на меня, чтобы увидеть учебник

Категории