Electron과 Vue로 데스크탑 앱 구축하기

게시 됨: 2022-03-10

빠른 요약 ↬ Electron은 GitHub에서 개발 및 유지 관리하는 오픈 소스 소프트웨어 프레임워크입니다. 웹 기술을 사용하여 데스크탑 GUI 응용 프로그램을 개발할 수 있습니다. 이 튜토리얼에서 Timi Omoyeni는 Vue CLI Plugin Electron Builder를 사용하여 Vue.js로 데스크탑 애플리케이션을 구축할 때 염두에 두어야 할 사항을 설명합니다.

JavaScript는 특히 React, Vue 및 Angular와 같은 일부 프레임워크를 사용하여 웹 사이트 및 웹 응용 프로그램을 빌드하기 위한 언어로 알려져 있었지만 시간이 지남에 따라(초기 2009년) JavaScript가 브라우저 외부에서 실행할 수 있게 되었습니다. 웹 브라우저 외부에서 JavaScript 코드를 실행하는 오픈 소스, 크로스 플랫폼, JavaScript 런타임 환경인 Node.js의 등장. 이로 인해 웹 애플리케이션 그 이상으로 JavaScript를 사용할 수 있게 되었으며 그 중 하나는 Electron.js를 사용하여 데스크톱 애플리케이션을 구축하는 것입니다.

Electron을 사용하면 런타임에 풍부한 기본(운영 체제) API를 제공하여 순수한 JavaScript로 데스크톱 애플리케이션을 만들 수 있습니다. 웹 서버가 아닌 데스크톱 애플리케이션에 중점을 둔 Node.js 런타임의 변형으로 볼 수 있습니다.

이 튜토리얼에서는 Electron을 사용하여 데스크탑 애플리케이션을 빌드하는 방법을 배우고 Vuejs를 사용하여 Electron 애플리케이션을 빌드하는 방법도 배울 것입니다.

참고 : 이 튜토리얼을 따르려면 Vue.js 및 Vue CLI에 대한 기본 지식이 필요합니다. 이 튜토리얼에 사용된 모든 코드는 내 GitHub에서 찾을 수 있습니다. 자유롭게 복제하고 놀아보세요!

데스크탑 애플리케이션이란 무엇입니까?

데스크톱 응용 프로그램은 데스크톱 또는 랩톱 컴퓨터에서 독립 실행형으로 실행되는 응용 프로그램입니다. 특정 작업을 수행하고 이 목적으로만 설치되는 응용 프로그램입니다.

데스크톱 응용 프로그램의 예로는 문서를 만들고 입력하는 데 사용되는 Microsoft Word가 있습니다. 일반적인 데스크톱 응용 프로그램의 다른 예로는 웹 브라우저, Visual Studio Code 및 Adobe Photoshop이 있습니다. 데스크톱 응용 프로그램은 액세스하고 사용하기 위해 데스크톱 응용 프로그램을 설치해야 하고 때로는 작동하기 위해 인터넷 액세스가 필요하지 않기 때문에 웹 응용 프로그램과 다릅니다. 반면에 웹 앱은 해당 앱이 호스팅되는 URL을 방문하기만 하면 액세스할 수 있으며 액세스하기 전에 항상 인터넷 액세스가 필요합니다.

데스크톱 앱 구축에 사용되는 프레임워크의 예는 다음과 같습니다.

자바
Java는 클래스 기반의 객체 지향적인 범용 프로그래밍 언어이며 가능한 한 구현 종속성을 최소화하도록 설계되었습니다. 이는 애플리케이션 개발자가 WORA( 한번 작성하고 어디서나 실행 )를 허용하기 위한 것입니다. 즉, 컴파일된 Java 코드는 재컴파일할 필요 없이 Java를 지원하는 모든 플랫폼에서 실행할 수 있습니다.
자바 FX
공식 문서에 따르면 Java를 기반으로 구축된 데스크탑, 모바일 및 임베디드 시스템을 위한 오픈 소스, 차세대 클라이언트 애플리케이션 플랫폼입니다.
씨#
C#은 강력한 유형 지정, 어휘 범위, 명령형, 선언적, 기능적, 일반, 개체 지향 및 구성 요소 지향 프로그래밍 분야를 포괄하는 범용 다중 패러다임 프로그래밍 언어입니다.
.그물
.NET은 다양한 유형의 애플리케이션을 구축하기 위한 무료 크로스 플랫폼 오픈 소스 개발자 플랫폼입니다. .NET을 사용하면 여러 언어, 편집기 및 라이브러리를 사용하여 웹, 모바일, 데스크톱, 게임 및 IoT용으로 빌드할 수 있습니다.

점프 후 더! 아래에서 계속 읽기 ↓

전자 란 무엇입니까?

Electron은 데스크탑 애플리케이션을 구축하기 위한 오픈 소스 프레임워크입니다. 이전에는 'Atom shell'로 알려졌으며 GitHub에서 개발 및 유지 관리합니다. HTML, CSS 및 JavaScript를 사용하여 크로스 플랫폼 데스크톱 응용 프로그램을 작성할 수 있습니다. 즉, 하나의 코드 기반을 사용하여 Windows, MacOS 및 기타 플랫폼용 데스크톱 응용 프로그램을 구축할 수 있습니다. Node.js와 Chromium을 기반으로 합니다. Electron으로 구축된 애플리케이션의 예로는 인기 있는 Atom 편집기, Visual Studio Code, 데스크톱용 Wordpress 및 Slack이 있습니다.

설치

NPM을 사용하여 프로젝트에 Electron을 설치할 수 있습니다.

 npm install electron --save-dev

다음 명령을 사용하여 전자 앱을 많이 사용하려는 경우 전역적으로 설치할 수도 있습니다.

 npm install electron -g

Electron으로 데스크탑용 Vuejs 앱 빌드

Vuejs를 사용하여 웹 애플리케이션을 구축하는 데 익숙하다면 Vuejs를 사용하여 데스크톱 애플리케이션을 구축할 수 있습니다. 이를 위해 필요한 것은 Vue CLI 플러그인 Electron Builder뿐입니다.

Vue CLI 플러그인 전자 빌더

이 도구를 사용하면 Electron을 사용하여 데스크톱용 Vue 앱을 빌드할 수 있습니다. 즉, Vue 애플리케이션이 전자 앱으로 작동하게 됩니다. 이것은 웹 애플리케이션일 가능성이 있는 Vue 애플리케이션이 다른 프레임워크에서 별도의 데스크톱 애플리케이션을 구축할 필요 없이 데스크톱 환경에서 작동하도록 확장될 수 있음을 의미합니다. 이것은 Vue 개발자에게 웹을 넘어서는 옵션과 능력을 제공합니다. 앞으로 여러분이 갖고 있는 아이디어를 바탕으로 Windows, macOS 및 Linux에서 실행할 수 있는 데스크톱 응용 프로그램 옵션을 사용자에게 제공할 수 있습니다.

이것이 실제로 작동하는지 확인하기 위해 News API를 사용하여 뉴스 앱을 구축할 것입니다. 이 응용 프로그램은 속보 헤드라인을 제공하고 API를 사용하여 웹 전체에서 뉴스 소스 및 블로그의 기사를 검색할 수 있습니다. 시작하는 데 필요한 것은 여기에서 얻을 수 있는 개인 API 키뿐입니다.

다음을 제공하는 간단한 앱을 구축할 것입니다.

/top-headlines 끝점을 사용하여 국가를 선택할 수 있는 옵션과 함께 선택한 국가의 주요 헤드라인 및 속보 헤드라인을 표시하는 페이지입니다. News API는 지원하는 국가 목록의 뉴스를 제공합니다. 여기에서 목록을 찾으세요.
/everything 엔드포인트와 카테고리를 지정하는 쿼리 매개변수 q 의 조합을 사용하여 선택한 카테고리의 뉴스입니다.

API 키를 받은 후 Vue CLI를 사용하여 애플리케이션을 생성할 수 있습니다. 시스템에 Vue CLI가 설치되어 있는지 확인하고, 설치하지 않은 경우 다음 명령을 사용하여 설치합니다.

 npm install -g @vue/cli # OR yarn global add @vue/cli

이 작업이 완료되면 CLI를 사용하여 뉴스 앱을 만듭니다.

 vue create news-app

이 자습서에서는 Axios를 사용하여 News API에서 데이터를 가져오지만 더 편한 모든 대안을 사용할 수 있습니다. 다음 명령 중 하나를 사용하여 Axios를 설치할 수 있습니다.

 //NPM npm install axios // YARN yarn add axios

다음 단계는 애플리케이션에서 전역 구성을 위한 Axios 인스턴스를 설정하는 것입니다. 이 axios.js 파일을 생성할 src 폴더에 plugins 폴더를 생성할 것입니다. 파일을 생성한 후 다음 코드 줄을 추가합니다.

 import axios from "axios"; let baseURL = `https://newsapi.org/v2`; let apiKey = process.env.VUE_APP_APIKEY; const instance = axios.create({ baseURL: baseURL, timeout: 30000, headers: { "X-Api-Key": apiKey, }, }); export default instance;

여기에서 News API에서 가져온 baseURL 과 apiKey 를 정의하고 Axios의 새 인스턴스에 전달합니다. 이 인스턴스는 timeout 속성과 함께 baseURL 및 apiKey 를 허용합니다. News API는 API에 요청할 때 API 키를 추가해야 하며 요청에 연결할 수 있는 3가지 방법을 제공하지만 여기서는 instance 를 내보낸 후 헤더 X-Api-Key 속성에 추가합니다. 이 작업이 완료되면 이제 앱의 모든 Axios 요청에 대해 이 구성을 사용할 수 있습니다.

이 작업이 완료되면 다음 명령을 사용하여 CLI와 함께 Plugin Electron 빌더를 추가할 수 있습니다.

 vue add electron-builder

선호하는 Electron 버전을 선택하라는 메시지가 표시됩니다. 저는 최신 버전의 Electron(작성 당시)이기 때문에 버전 9.0.0 을 선택했습니다.

이 작업이 완료되면 이제 다음 명령을 사용하여 애플리케이션을 제공할 수 있습니다.

 Using Yarn(strongly recommended) yarn electron:serve OR NPM npm run electron:serve

앱을 컴파일하고 제공하는 데 약간의 시간이 걸립니다. 완료되면 시스템에서 응용 프로그램이 열리며 다음과 같이 표시됩니다.

전자 앱의 기본 열린 상태 — 전자 앱의 자동 열기 상태. (큰 미리보기)

앱의 devtools를 닫으면 다음과 같아야 합니다.

이 전자 플러그인은 이 앱 개발의 모든 부분이 Vue 앱과 동일한 방식으로 작동하기 때문에 매우 유용하고 사용하기 쉽습니다. 즉, 웹 애플리케이션과 데스크톱 앱 모두에 대해 하나의 코드베이스를 가질 수 있습니다. 앱은 세 부분으로 구성됩니다.

무작위로 선택된 국가의 주요 뉴스를 렌더링하는 방문 페이지입니다.
사용자가 선택한 국가의 주요 뉴스를 렌더링하는 페이지입니다.
사용자가 선택한 카테고리의 주요 뉴스를 렌더링하는 페이지입니다.

이를 위해 모든 탐색 링크에 대한 헤더 구성 요소가 필요합니다. 따라서 구성 요소 폴더에 파일을 만들고 이름을 header.vue 로 지정한 후 다음 코드 줄을 추가해 보겠습니다.

 <template> <header class="header"> <div class="logo"> <div class="logo__container"> <img src="../assets/logo.png" alt="News app logo" class="logo__image" /> </div> <h1>News App</h1> </div> <nav class="nav"> <h4 class="nav__link"> <router-link to="/home">Home</router-link> </h4> <h4 class="nav__link"> <router-link to="/top-news">Top News</router-link> </h4> <h4 class="nav__link"> <router-link to="/categories">News By Category</router-link> </h4> </nav> </header> </template> <script> export default { name: "app-header", }; </script> <style> .header { display: flex; flex-wrap: wrap; justify-content: space-between; } .logo { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; height: 50px; } .logo__container { width: 50px; height: 50px; } .logo__image { max-width: 100%; max-height: 100%; } .nav { display: flex; flex-wrap: wrap; width: 350px; justify-content: space-between; } </style>

여기에서 애플리케이션의 다른 부분에 대한 링크가 포함된 탐색 섹션과 함께 앱 이름과 로고(이미지는 내 GitHub에서 찾을 수 있음)가 있는 헤더 구성 요소를 만듭니다. 다음은 레이아웃 페이지( App.vue )에서 이 페이지를 가져와서 모든 페이지에서 헤더를 볼 수 있도록 하는 것입니다.

 <template> <div> <app-header /> <router-view /> </div> </template> <script> import appHeader from "@/components/Header.vue"; export default { name: "layout", components: { appHeader, }, }; </script> <style> @import url("https://fonts.googleapis.com/css2?family=Abel&family=Staatliches&display=swap"); html, #app { min-height: 100vh; } #app { font-family: "Abel", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; background-color: #fff; } #app h1 { font-family: "Staatliches", cursive; } a { font-weight: bold; color: #2c3e50; text-decoration: none; } a:hover { text-decoration: underline; } a.router-link-exact-active { color: #42b983; } </style>

여기에서 템플릿 섹션의 기본 콘텐츠를 스크립트 섹션에서 가져와 선언한 후 새로 생성된 헤더 구성 요소로 바꿉니다. 마지막으로 스타일 섹션에서 전체 앱에 대한 몇 가지 스타일을 추가합니다.

이제 앱을 보려고 하면 다음과 같아야 합니다.

다음 단계는 Home.vue 파일에 콘텐츠를 추가하는 것입니다. 이 페이지는 앱의 첫 번째 섹션을 호스팅합니다. 무작위로 선택된 국가의 주요 뉴스. 다음 코드 줄을 사용하여 Home.vue 파일을 업데이트합니다.

 <template> <section class="home"> <h1>Welcome to News App</h1> <h4>Displaying Top News from {{ countryInfo.name }}</h4> <div class="articles__div" v-if="articles"> <news-card v-for="(article, index) in articles" :key="index" :article="article" ></news-card> </div> </section> </template> <script> import { mapActions, mapState } from "vuex"; import NewsCard from "../components/NewsCard"; export default { data() { return { articles: "", countryInfo: "", }; }, components: { NewsCard, }, mounted() { this.fetchTopNews(); }, computed: { ...mapState(["countries"]), }, methods: { ...mapActions(["getTopNews"]), async fetchTopNews() { let countriesLength = this.countries.length; let countryIndex = Math.floor( Math.random() * (countriesLength - 1) + 1 ); this.countryInfo = this.countries[countryIndex]; let { data } = await this.getTopNews( this.countries[countryIndex].value ); this.articles = data.articles; }, }, }; </script> <style> .articles__div { display: flex; flex-wrap: wrap; justify-content: center; } </style>

이 파일의 스크립트 섹션에서는 나중에 이 파일에서 사용할 Vuex의 mapState 및 mapActions 를 가져옵니다. 또한 이 페이지의 모든 뉴스 헤드라인을 렌더링하는 NewsCard 구성 요소(다음에 생성)를 가져옵니다. 그런 다음 fetchTopNews 메서드를 사용하여 스토어의 countries 배열에서 무작위로 선택된 국가의 최신 뉴스를 가져옵니다. 이 국가는 getTopNews 작업에 전달되며 baseURL/top-news?country=${randomCountry} 와 같은 국가에 대한 쿼리로 baseURL 에 추가됩니다. 이 작업이 완료되면 이 데이터를 반복하여 템플릿 섹션에 있는 Newscard 구성 요소의 article 소품에 전달합니다. 우리는 또한 최고의 뉴스가 어느 나라에서 왔는지를 나타내는 단락이 있습니다.

다음은 이 뉴스를 표시할 NewsCard 구성 요소를 설정하는 것입니다. 구성 요소 폴더 안에 새 파일을 만들고 이름을 NewsCard.vue 로 지정하고 다음 코드 줄을 추가합니다.

 <template> <section class="news"> <div class="news__section"> <h1 class="news__title"> <a class="article__link" :href="article.url" target="_blank"> {{ article.title }} </a> </h1> <h3 class="news__author" v-if="article.author">{{ article.author }}</h3> <!-- <p class="article__paragraph">{{ article.description }}</p> --> <h5 class="article__published">{{ new Date(article.publishedAt) }}</h5> </div> <div class="image__container"> <img class="news__img" src="../assets/logo.png" :data-src="article.urlToImage" :alt="article.title" /> </div> </section> </template> <script> export default { name: "news-card", props: { article: Object, }, mounted() { this.lazyLoadImages(); }, methods: { lazyLoadImages() { const images = document.querySelectorAll(".news__img"); const options = { // If the image gets within 50px in the Y axis, start the download. root: null, // Page as root rootMargin: "0px", threshold: 0.1, }; const fetchImage = (url) => { return new Promise((resolve, reject) => { const image = new Image(); image.src = url; image.onload = resolve; image.onerror = reject; }); }; const loadImage = (image) => { const src = image.dataset.src; fetchImage(src).then(() => { image.src = src; }); }; const handleIntersection = (entries) => { entries.forEach((entry) => { if (entry.intersectionRatio > 0) { loadImage(entry.target); } }); }; // The observer for the images on the page const observer = new IntersectionObserver(handleIntersection, options); images.forEach((img) => { observer.observe(img); }); }, }, }; </script> <style> .news { width: 100%; display: flex; flex-direction: row; align-items: flex-start; max-width: 550px; box-shadow: 2px 1px 7px 1px #eee; padding: 20px 5px; box-sizing: border-box; margin: 15px 5px; border-radius: 4px; } .news__section { width: 100%; max-width: 350px; margin-right: 5px; } .news__title { font-size: 15px; text-align: left; margin-top: 0; } .news__author { font-size: 14px; text-align: left; font-weight: normal; } .article__published { text-align: left; } .image__container { width: 100%; max-width: 180px; max-height: 180px; } .news__img { transition: max-width 300ms cubic-bezier(0.4, 0, 1, 1), max-height 300ms cubic-bezier(0.4, 0, 1, 1); max-width: 150px; max-height: 150px; } .news__img:hover { max-width: 180px; max-height: 180px; } .article__link { text-decoration: none; color: inherit; } </style>

여기 article 객체 소품을 사용하여 이 구성 요소에 전달된 데이터를 표시합니다. 또한 각 기사에 첨부된 이미지를 지연 로드하는 방법도 있습니다. 이 메서드는 우리가 가지고 있는 기사 이미지의 수를 반복하고 표시될 때 지연 로드합니다. 마지막으로 스타일 섹션에 이 구성 요소를 대상으로 하는 스타일이 있습니다.

다음은 최신 뉴스를 받을 수 있도록 상점을 설정하는 것입니다. index.js 파일에 다음 코드 줄을 추가합니다.

 import Vue from "vue"; import Vuex from "vuex"; import axios from "../plugins/axios"; Vue.use(Vuex); const store = new Vuex.Store({ state: { countries: [{ name: "United States of America", value: "us", }, { name: "Nigeria", value: "ng", }, { name: "Argentina", value: "ar", }, { name: "Canada", value: "ca", }, { name: "South Africa", value: "za", }, ], categories: [ "entertainment", "general", "health", "science", "business", "sports", "technology", ], }, mutations: {}, actions: { async getTopNews(context, country) { let res = await axios({ url: `/top-headlines?country=${country}`, method: "GET", }); return res; }, }, }); export default store;

우리는 상점에 두 개의 속성을 추가하고 있습니다. 이러한 속성 중 하나는 countries 입니다. 이 속성은 국가의 개체 배열을 포함합니다. 또한 categories 속성이 있습니다. 여기에는 News API에서 사용 가능한 범주의 배열이 포함됩니다. 독자는 특정 국가 및 카테고리의 주요 뉴스를 자유롭게 볼 수 있는 것을 좋아할 것입니다. 이것은 또한 앱의 한 부분 이상에서 필요하며 이것이 우리가 스토어를 사용하는 이유입니다. 스토어의 작업 섹션에는 국가에서 주요 뉴스를 가져오는 getTopNews 메서드가 있습니다(이 국가는 이 작업을 호출한 구성 요소에서 전달되었습니다).

이 시점에서 앱을 열면 다음과 같은 방문 페이지가 표시되어야 합니다.

background.js 파일

이 파일은 앱에 대한 Electron의 진입점입니다. 이 앱에 대한 모든 데스크탑 앱과 유사한 설정을 제어합니다. 이 파일의 기본 상태는 내 GitHub에서 찾을 수 있습니다.

이 파일에는 앱의 기본 height 및 width 와 같이 앱에 대해 미리 정의된 구성이 몇 가지 설정되어 있습니다. 이 파일에서 수행할 수 있는 몇 가지 작업을 살펴보겠습니다.

Vuejs devtools 활성화

기본적으로 Electron의 개발 도구에 액세스할 수 있지만 설치 후에는 활성화되지 않습니다. 이것은 Windows 10의 기존 버그의 결과이므로 background.js 파일을 열면 주석 처리된 이유를 설명하는 주석과 함께 일부 주석 처리된 코드를 찾을 수 있습니다.

 // Install Vue Devtools // Devtools extensions are broken in Electron 6.0.0 and greater // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode // If you are not using Windows 10 dark mode, you may uncomment these lines // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines // try { // await installVueDevtools() // } catch (e) { // console.error('Vue Devtools failed to install:', e.toString()) // }

따라서 이 버그의 영향을 받지 않는 경우 try/catch 블록의 주석 처리를 제거하고 동일한 파일(5행)에서 installVueDevtools 를 검색하고 주석 처리를 제거할 수도 있습니다. 이 작업이 완료되면 앱이 자동으로 다시 시작되고 개발자 도구를 확인할 때 Vuejs Devtools가 표시되어야 합니다.

앱의 사용자 지정 아이콘 선택

기본적으로 Electron 아이콘은 앱의 기본 아이콘으로 설정되며 대부분의 경우 사용자 정의 아이콘을 설정하고 싶을 것입니다. 이렇게 하려면 아이콘을 공용 폴더로 이동하고 icon.png 로 이름을 바꿉니다. 다음으로 해야 할 일은 필요한 종속성 electron-icon-builder 를 추가하는 것입니다.

다음 명령 중 하나를 사용하여 설치할 수 있습니다.

 // With Yarn: yarn add --dev electron-icon-builder // or with NPM: npm install --save-dev electron-icon-builder

이 작업이 완료되면 이 다음 명령을 실행할 수 있습니다. 아이콘을 Electron 형식으로 변환하고 완료되면 콘솔에 다음을 인쇄합니다.

다음은 background.js 파일에서 아이콘 옵션을 설정하는 것입니다. 이 옵션은 Electron 에서 가져온 BrowserWindow 옵션 안에 들어갑니다. 이렇게 하려면 BrowserWindow 를 다음과 같이 업데이트하십시오.

 // Add this to the top of your file /* global __static */ // import path import path from 'path' // Replace win = new BrowserWindow({ width: 800, height: 600 }) // With win = new BrowserWindow({ width: 800, height: 600, icon: path.join(__static, 'icon.png') })

이제 yarn run electron:build 를 실행하고 앱을 보면 업데이트된 아이콘이 앱 아이콘으로 사용되는 것을 볼 수 있지만 개발 중에 변경되지는 않습니다. 이 문제는 macOS에서 수동 수정을 해결하는 데 도움이 됩니다.

앱 제목 설정

앱 제목이 앱 이름(이 경우에는 news-app)으로 설정되어 있으며 변경해야 합니다. 그렇게 하려면 다음과 같이 background.js 파일의 BrowserWindow 메서드에 title 속성을 추가해야 합니다.

 win = new BrowserWindow({ width: 600, height: 500, title: "News App", icon: path.join(__static, "icon.png"), webPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION, }, });

여기서는 앱의 제목을 '뉴스 앱'으로 설정합니다. 그러나 index.html 파일에 제목이 선택되어 있거나 제목이 이것으로 변경되지 않으면 파일에 다음 코드를 추가해 보십시오.

 win.on("page-title-updated", (event) => event.preventDefault());

BrowserWindow 에서 title 이 업데이트될 때 발생하는 이벤트를 수신하고 있습니다. 이 이벤트가 발생하면 index.html 파일에 있는 제목으로 제목을 업데이트하지 않도록 Electron에 지시합니다.

변경할 가치가 있는 또 다른 사항은 productName 입니다. 이는 앱 아이콘 위에 마우스를 놓을 때 표시되는 이름 또는 컴퓨터에서 앱을 인식하는 이름을 제어합니다. 현재 우리 앱의 이름은 Electron 입니다. 프로덕션에서 이 이름을 변경하려면 vue.config.js 파일을 만들고 여기에 다음 코드 줄을 추가하세요.

 module.exports = { pluginOptions: { electronBuilder: { builderOptions: { productName: "News App", }, }, }, };

여기에서 productName 을 'News App'으로 정의하여 앱에 대한 빌드 명령을 실행할 때 이름이 'Electron'에서 'News App'으로 변경됩니다.

멀티 플랫폼 구축

기본적으로 빌드 명령을 실행할 때 생성되는 앱은 실행 중인 플랫폼에 따라 다릅니다. 즉, Linux에서 빌드 명령을 실행하면 생성되는 앱이 Linux 데스크톱 앱이 됩니다. 다른 플랫폼(macOS 및 Windows)에도 동일하게 적용됩니다. 그러나 Electron은 생성하려는 플랫폼(또는 두 개의 플랫폼)을 지정하는 옵션과 함께 제공됩니다. 사용 가능한 옵션은 다음과 같습니다.

mac
win
linux

따라서 앱의 Windows 버전을 빌드하려면 다음 명령을 실행하십시오.

 // NPM npm electron:build -- --win nsis // YARN yarn electron:build --win nsis

결론

완성된 애플리케이션은 내 GitHub에서 찾을 수 있습니다. 공식 Electron 문서는 원하는 방식으로 데스크탑 앱을 사용자 정의하는 데 도움이 되는 정보와 가이드를 제공합니다. 내가 시도했지만 이 자습서에 포함되지 않은 몇 가지 사항은 다음과 같습니다.

macOS에서 독 사용자 지정 — https://www.electronjs.org/docs/tutorial/macos-dock.
크기 조정, 최대화 및 더 많은 설정 — https://github.com/electron/electron/blob/master/docs/api/browser-window.md#new-browserwindowoptions.

따라서 Electron 애플리케이션으로 훨씬 더 많은 작업을 수행하려는 경우 공식 문서에서 시작하는 것이 좋습니다.