Electron, Vue3 개발 환경 구성

Posted at — Oct 28, 2021

데스크탑 앱을 만들기 위해서 Electron에 관심을 가지던 중, Electron과 Vue3를 사용해 앱을 만들어 보고 싶어졌다. 앱을 만들기 전에 Electron과 Vue3 개발 환경을 구성해 보자.

참고로 Node 버전은 14 이상에서 진행한다.

Vue CLI

Vue 프로젝트를 vue cli 로 구성하고 electron 구성을 추가하는 순서로 진행한다. 이 글에서 사용하는 vue cli 버전은 4.5.14이다.

$ vue -V
$ @vue/cli 4.5.14

Vue 프로젝트 생성

$ vue create vue-electron

Manually select feeature

Manually select feeatures를 선택한다.

스크린샷 2021-10-28 오전 10 50 25

아래 항목을 선택하고 Enter를 누른다.

◉ Choose Vue version
◉ Babel
◉ TypeScript
◉ Router
◉ Vuex
◉ Linter / Formatter

스크린샷 2021-10-28 오전 10 51 47

vue는 3.x 버전을 선택한다.

스크린샷 2021-10-28 오전 10 52 27

Use class-style component syntax? 는 No를 선택한다.

스크린샷 2021-10-28 오전 10 53 20

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 는 Yes를 선택한다.

스크린샷 2021-10-28 오전 10 54 02

Use history mode for router?는 Yes를 선택한다.

스크린샷 2021-10-28 오전 10 54 38

Pick a linter / formatter config는 ESLint와 Prettier를 선택한다.

스크린샷 2021-10-28 오전 10 55 33

Pick additional lint features에서 파일 저장시 linting을 하도록 Lint on save를 선택한다.

스크린샷 2021-10-28 오전 10 56 33

각 도구의 설정 파일을 package.json 한 곳에 몰아 넣지 말고 각각 따로 만들 수 있게 In dedicated config files를 선택한다.

스크린샷 2021-10-28 오전 10 57 51

나중에 같은 설정을 반복해서 사용할 수 있도록 설정을 저장해 놓는다.

스크린샷 2021-10-28 오전 10 59 39

vue 프로젝트가 생성된다.

스크린샷 2021-10-28 오전 11 00 47

vue 프로젝트가 생성되면 프로젝트 폴더로 이동한다.

$ cd vue-electron

Electron 추가

electron-builder를 사용해서 electron 개발 환경을 구성한다. Vue는 CLI용 electron-builder 플러그인을 제공한다. 프로젝트 폴더에서 아래와 같이 vue cli를 사용해 electron-builder를 추가한다.

$ vue add electron-builder

스크린샷 2021-10-28 오전 11 04 38

Electron 버전 선택

프로젝트에 필요한 Electron 버전을 선택한다.

스크린샷 2021-10-28 오전 11 05 15

tailwindcss 추가

요즘 대세는 [tailwindcss]()! tailwindcss를 추가하자. tailwindcss도 vue cli용 플러그인을 제공한다.

$ vue add tailwind

스크린샷 2021-10-28 오전 11 09 49

tailwind css 구성 파일을 minimal 로 선택한다.

제공하는 명령어

유명하진 않지만 sl(script-list)을 사용하면 package.json이 제공하는 스크립트 명령어를 편하게 볼 수 있다.

스크린샷 2021-10-28 오전 11 16 22

앱 실행

아래 명령어를 실행하면 electron + vue3 앱이 실행된다.

$ npm run electron:serve

스크린샷 2021-10-28 오전 11 17 38

앱 빌드는 npm run electron:build 로 할 수 있다. 인증서 등이 필요하므로 자세한 내용은 Electron Builder 문서를 참고한다.

preload.js 설정

preload.js 를 아래와 같이 설정하면 preload.js 파일을 찾을 수 없다는 오류가 발생한다.

async function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
      preload: path.resolve(__dirname, 'preload.js'),
    },
  });
...
}

스크린샷 2021-11-02 오전 11 41 17

문제의 원인은 electron 배포 폴더에 preload.js 파일이 없기 때문이다. preload.js 파일이 src 폴더에 있을 때, 아래와 같이 vue.config.js를 설정하면 이슈가 해결된다.

module.exports = {
  pluginOptions: {
    electronBuilder: {
      preload: 'src/preload.js',
    },
  },
};

스크린샷 2021-11-02 오전 11 45 26

dist_electron 폴더에 preload.js 파일이 따로 있는 것을 확인할 수 있다.

.vue 파일도 저장시 .prettier 내용 적용하기

.vscode/settings.json 에 아래 내용을 추가한다.

{
  ...,
  "editor.defaultFormatter": "octref.vetur",
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.postcss": "prettier",
  "vetur.format.defaultFormatter.scss": "prettier",
  "vetur.format.defaultFormatter.less": "prettier",
  "vetur.format.defaultFormatter.stylus": "stylus-supremacy",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"
}

Electron, BrowserWindow 스크롤바 숨기기

index.html 파일에 스타일을 지정해 주면 문제는 간단히 해결된다. 단, overflow: hidden 을 주면 스크롤이 동작하지 않는다. 그래서 ::-webkit-scrollbar의 display를 none으로 처리하여 보이지 않게 하면, 스크롤바를 숨기면서 스크롤이 동작하도록 할 수 있다.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>My Electron App</title>
    <style>
      ::-webkit-scrollbar {
        display: none;
      }
    </style>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Burt.K

Awesome Discovery