Предисловие

Не так давно я увидел статью, опубликованную Tencent Cloud Community, в которой говорилось: QQ Рефакторинг? Я просто щелкнул, чтобы посмотреть, какая технология использовалась,и результат был Electron Я видел это и всегда хотел поиграть в это приложение на рабочем столе,

Я случайно был за покупками dromara Когда я был в сообществе открытого исходного кода, я увидел фреймворк с открытым исходным кодом.

egg

Это простая в освоении кроссплатформенная среда разработки настольного программного обеспечения корпоративного уровня. My Dima идеально подходит для таких новичков, как я 😍

📋 Введение

Уже получены 4К+ звезды в Gitee, вступают в силу!

Данная система широко используется в бухгалтерском учете.、государственные дела、предприятие、медицинский、Школа、торговля акциями、ERP、развлечение、Клиенты в видео и других областях,Пожалуйста, не стесняйтесь использовать его!

• 🍩 Зачем использовать? Программное обеспечение для настольных ПК (офисная ориентация, Персональные инструменты) по-прежнему будут одной из потребностей ПК в ближайшие десять лет для повышения эффективности работы.
• 🍉 Простой: Просто пойми JavaScript
• 🍑 Зрение: Все разработчики могут научиться разработке программного обеспечения для настольных компьютеров.

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

Здесь идеальная экология

1. 🍄 Кроссплатформенность: набор кодов, которые можно упаковать в версию для Windows, версию для Mac, версию для Linux, отечественную UOS, Deepin, Kirin и т. д.
2. 🌹 Архитектура: единый бизнес-процесс/модуляризация/многозадачность (процесс, поток, процесс рендеринга), что упрощает разработку крупномасштабных проектов.
3. 🌱 Просто и эффективно: просто выучите язык js
4. 🌴 внешний независимый интерфейс: теоретически поддерживает любой внешний интерфейс интерфейсные технологии, такие как: vue, React, html и т.д.
5. 🍁 Инженерное дело: можно использовать внешний интерфейс, разработка серверной части, размышления о написании настольного программного обеспечения
6. 🌷 Высокая производительность: управляемый событиями неблокирующий ввод-вывод.
7. 🌰 Богатые функции: настройка, связь, плагины, базы данных, обновления, упаковка, инструменты... все.
8. 💐 Безопасность: поддерживает шифрование байт-кода, сжатие и шифрование обфускации.
9. 🌻 Демонстрация функций: предоставляются общие функции настольного программного обеспечения, интеграция с инфраструктурой или демонстрация.

✈️ Сценарии использования

🚀 Обычное настольное программное обеспечение

он поддерживает

🚖 платформа Windows

🚍 платформа MacOS

🚔 платформа Linux — отечественная UOS, Deepin

🚔 платформа Linux — Ubuntu

Ниже я использовал приложение MacOs M1 Chip-Booted Desktop.

🖼️ Шоу

Проект Front -End преобразуется в настольное программное обеспечение

Поддерживает конвертацию проектов и прямой доступ к веб-адресам, что очень удобно.

🚙 vue-ant-design (локальный)

🚙 Управление проектом ZenTao (адрес веб-проекта)

🎮 Игры (разработка технологий, связанных с h5)

Прекрасно поддерживает H5

Я взволнован, когда вижу это, я в любом случае взволнован.

🎉🎉🎉 ElectronEgg 🎉🎉🎉

приложение

Перейдите в Code Cloud, чтобы получить код.

https://gitee.com/dromara/electron-egg

Сначала сделайте форк копии на свой собственный склад.

Вилка укомплектована и копирует проект яйца на вашем собственном складе.

Здесь я использую инструменты WebStorm для разработки.

Выполните git clone и клонируйте его локально на наш компьютер.

Подготовить

• рекомендовать node.js >= 16.20.0
• рекомендоватьиспользовать nvm управлять nodejs Версия

nvmУстановить

Загрузите и Установить nvm

• windows：

https://github.com/coreybutler/nvm-windows/releases

• linux/macOS：

GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions

использоватьnvmУстановитьnode.js

Установить Заказ:

# Установитьnode.jsВерсия
nvm install v16.20.0

Используйте указанную версию node.js: nvm использует номер версии.

nvm use 16.20.0

Используйте зеркало узла Taobao: nvm node_mirror

nvm node_mirror https://npmmirror.com/mirrors/node/

Используйте зеркало Taobao npm: nvm npm_mirror

nvm npm_mirror https://npmmirror.com/mirrors/npm/

Установить

Введите корневой каталог для загрузки зависимостей.

💫 Запускаем проект

Входить【внешний интерфейс Оглавление】Установить frontend полагаться

осуществлять: cd frontend && npm i

Вернуться в корневой каталог

Примечание⚠️:Новые версии могут быть запущены одновременно 前端 & Основной процесс также можно запустить отдельно.

Электронный бизнес-код в настоящее время не поддерживает горячие обновления (после Искода его необходимо перезапустить). время запуска интерфейса длительное, рекомендуется Начать отдельно。

Запустите интерфейсный интерфейс (UI) и электронные службы одновременно.

npm run dev

Запустите интерфейс (UI) и электрон отдельно. Откроется два терминала.

npm run dev-frontend

npm run dev-electron

Здесь я использую одновременный запуск

Стартовал успешно🏅️

При нажатии кнопки «Начать» появится новое окно, указывающее на официальный документ. Как упоминалось ранее, это называется адрес веб-проекта.

Так здорово!

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

Испытайте настольное программное обеспечение

🪝Строить

Может генерировать исполняемые файлы exe, dmg, deb.

нас Продолжить первое Исправлятьодин развнешний интерфейс demo Проверьте, удачна ли упаковка

Измените файл frontend/src/views/example/hello/Index.vue.

один、строитьвнешний интерфейс

Если вы напрямую входите в каталог внешнего интерфейса и выполняете сборку npm run (без использования ee-bin), объект процесса не содержит информации о процессе рендеринга. Я расскажу об этом позже

в корневом каталоге осуществлять: npm run build-frontend

2. Переместите ресурсы внешнего интерфейса Пакета во фреймворк.

Третья команда будет frontend/dist Копировать в /public/dist ; Служба наконец-то загружается /public/distвнешний интерфейсресурс。

Код каталога внешнего интерфейса не будет упакован во избежание утечки исходного кода.

в корневом каталоге осуществлять: npm run rd

3. Предварительный режим, проверьте, нормальна ли функция (производственная среда).

в корневом каталоге осуществлять: npm run start

📦 Упаковка

Прежде чем собирать вещи, мы можем пойти в builder.jsруководить Исправлять Название программного обеспечения, имя окна и т. д.нас Нет Исправлять Понятно Раш прямо!

Заказ

npm run build-w
npm run build-w-32 (32 бита)
npm run build-w-64 (64-разрядная версия)
npm run build-w-arm64 (arm64)

# ee > v2.2.1
npm run build-wz
npm run build-wz-32 (32 бита)
npm run build-wz-64 (64-разрядная версия)
npm run build-wz-arm64 (arm64)

npm run build-m
npm run build-m-arm64 (архитектура чипа m1)

У меня есть версия для Mac, поэтому я просто печатаю ее на Mac.

⚠️Внимание вот Mac Os Arm Архитектура Заказ

в корневом каталоге осуществлять: npm run build-w-arm64

Упаковка успешна. Успешно упакованы программы для Windows и Mac!

Я раньше неправильно напечатал и напечатал ветер хахахаха

тест

Изначально я упаковал программу, поэтому зашел в builder.js и изменил имя упаковки.

прямойруководить Установить Откройте программное обеспечение Работает отлично ✅

Этот фреймворк действительно мощный и прекрасно реализует концепцию, в которую могут играть даже новички!

Введите описание изображения

наконец

Этот вопрос исчерпан. Увидимся в следующий раз👋~

🌊 Подпишитесь на меня, чтобы не потеряться. Если эта статья вам полезна или у вас есть какие-либо вопросы, оставьте сообщение в области комментариев, я обычно отвечу, когда увижу ее. Пожалуйста, поставьте лайк и поддержите~ 💗

Я участвую в третьем этапе специального тренировочного лагеря Tencent Technology Creation 2023 с эссе, получившими приз, и сформирую команду, которая разделит приз!