Skip to content

README_RU.md

Latest commit

 

History

History
282 lines (200 loc) · 10.8 KB

README_RU.md

File metadata and controls

282 lines (200 loc) · 10.8 KB
Raw

Шаблон Electron + Next.js + Vite + HeroUI + Tailwind CSS

English | 中文 | 日本語 | Español | Français | Русский

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

Electron React Next.js TypeScript Vite Tailwind CSS

Скриншот приложения

✨ Особенности

🚀 Современный Технологический Стек

  • Electron 40 - Последняя стабильная версия для кроссплатформенных настольных приложений
  • React 18 - Последний React с параллельными функциями
  • TypeScript 5 - Строгий режим включен для безопасности типов
  • Vite 6 - Молниеносный HMR и оптимизированные производственные сборки
  • HeroUI v2 - Красивая и доступная библиотека компонентов React
  • Tailwind CSS v4 - CSS с приоритетом утилит с последними функциями

🛠️ Опыт Разработки

  • Горячая Замена Модулей (HMR) - Мгновенные обновления во время разработки
  • Безопасность Типов - Полная поддержка TypeScript с строгим режимом
  • Современные Инструменты - ESLint, Prettier предварительно настроены
  • Псевдонимы Путей - Чистые импорты с префиксом @/
  • Границы Ошибок - Изящная обработка ошибок

🎨 UI/UX

  • Темный Режим - Встроенная поддержка переключения тем
  • Адаптивный Дизайн - Работает на всех размерах экрана
  • Плавные Анимации - Интеграция Framer Motion
  • Доступность - Компоненты, соответствующие WCAG
  • Настраиваемость - Легкая тематизация с Tailwind CSS

📦 Готовность к Производству

  • Генерация Установщиков - Сборка для Windows, macOS и Linux
  • Кроссплатформенность - Единая кодовая база для всех основных настольных платформ

📋 Предварительные Требования

Перед началом убедитесь, что выполнены следующие требования:

  • Node.js >= 18.0.0
  • Yarn >= 1.22.0 (рекомендуется) или npm/pnpm
  • Git

Примечание: Если вам нужно собирать нативные зависимости (опционально), вам могут потребоваться инструменты сборки для конкретной платформы (Visual Studio Build Tools для Windows или Xcode Command Line Tools для macOS).

🚀 Быстрый Старт

1. Клонирование Репозитория

git clone https://github.com/LingChen-tsjmdlc/electron-vite-heroui-template.git my-electron-app
cd my-electron-app

2. Установка Зависимостей

yarn install

3. Запуск Сервер Разработки

# Запуск в Electron с горячей перезагрузкой
yarn dev

# Или только предпросмотр в браузере
yarn dev:web

4. Сборка для Производства

# Сборка для текущей платформы
yarn build

# Сборка для конкретных платформ
yarn build:win    # Windows
yarn build:mac    # macOS
yarn build:linux  # Linux
yarn build:all    # Все платформы

📂 Структура Проекта

my-electron-app/
├── electron/                 # Главный процесс Electron
│   ├── main.ts              # Вход главного процесса
│   └── preload.ts           # Скрипт предзагрузки для IPC
├── src/
│   ├── components/          # Переиспользуемые компоненты React
│   ├── config/              # Файлы конфигурации
│   ├── layouts/             # Макеты страниц
│   ├── pages/               # Страницы приложения
│   ├── styles/              # Глобальные стили
│   └── types/               # Типы TypeScript
├── docs/                    # Документация
├── package.json
├── vite.config.ts
├── tsconfig.json
└── tailwind.config.js

🔧 Конфигурация

Настройка Сборки

Отредактируйте раздел build в package.json:

{
  "build": {
    "appId": "com.yourcompany.yourapp",
    "productName": "Название Вашего Приложения",
    "directories": {
      "output": "release"
    }
  }
}

📝 Руководство по Разработке

Создание Новых Страниц

  1. Создайте новый файл в src/pages/:
// src/pages/my-page.tsx
export default function MyPage() {
  return <div>Моя Новая Страница</div>;
}
  1. Добавьте маршрут в src/App.tsx:
import MyPage from "./pages/my-page";

<Route path="/my-page" element={<MyPage />} />

Стилизация с Tailwind CSS

Используйте утилитарные классы Tailwind напрямую:

<div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-primary-500 to-secondary-500">
  <h1 className="text-4xl font-bold text-white">Привет Мир</h1>
</div>

Использование Компонентов HeroUI

import { Button, Card, CardBody } from "@heroui/react";

<Card>
  <CardBody>
    <Button color="primary" size="lg">
      Нажми
    </Button>
  </CardBody>
</Card>;

⚠️ Важно: Использование Link

При использовании ссылок в этом шаблоне вы должны различать внутреннюю навигацию и внешние ссылки:

Для внутренней навигации (React Router):

import { Link } from "react-router-dom";

// ✅ Правильно - Без обновления страницы
<Link to="/docs">Документация</Link>
<Link to="/about">О нас</Link>

Для внешних веб-сайтов:

import { Link } from "@heroui/link";

// ✅ Правильно - Открывается в браузере
<Link href="https://github.com" isExternal>GitHub</Link>

❌ Распространенная Ошибка:

import { Link } from "@heroui/link";

// Неправильно! Это вызывает обновление страницы и ломает маршрутизацию
<Link href="/docs">Документация</Link>

🔐 IPC Коммуникация

От Рендерера к Главному

Скрипт Предзагрузки (electron/preload.ts):

contextBridge.exposeInMainWorld("electronAPI", {
  sendMessage: (channel: string, data: any) => {
    ipcRenderer.send(channel, data);
  },
  onMessage: (channel: string, callback: Function) => {
    ipcRenderer.on(channel, (event, ...args) => callback(...args));
  },
});

Использование в React:

window.electronAPI.sendMessage("custom-event", { data: "value" });

🐛 Устранение Неисправностей

Общие Проблемы

Белый экран после сборки?

  • Убедитесь, что используете HashRouter для Electron (уже настроено)
  • Проверьте, что все ресурсы включены в массив files в package.json

Горячая перезагрузка не работает?

  • Убедитесь, что запускаете yarn dev, а не yarn build
  • Проверьте, что HMR включен в vite.config.ts

🤝 Вклад

Вклады приветствуются! Не стесняйтесь отправлять Pull Request.

📄 Лицензия

Этот проект лицензирован по лицензии MIT - см. файл LICENSE для получения подробной информации.

🙏 Благодарности

  • Electron - Кроссплатформенный фреймворк
  • HeroUI - Библиотека красивых компонентов
  • Vite - Ультрабыстрый инструмент сборки
  • Tailwind CSS - CSS с приоритетом утилит
  • React - UI библиотека

📞 Поддержка

Если вы нашли этот шаблон полезным, пожалуйста, рассмотрите возможность поставить ему ⭐ на GitHub!

Для вопросов или проблем:

Построено с ❤️ с использованием Electron, React, Vite и HeroUI