Vue.js/Electron.js (Electron-Vue) 를 통한 개발환경 구성

Vue.js 와 Electron.js 데스크톱 어플리케이션을 개발하기 위한 환경을 구성해보려한다.
UI Framework 는 Vuetify.js 로 하기로 한다... 익숙해짐인건가.. 가장깔끔;;
일단 진행해보자.

* 그리고 사전에 기본적으로 필수사항을 확인한다. (Requirement : npm or yarn)

1. Vue CLI (제일먼저 Vue CLI 를 설치하고 버전을 확인해보자)
"-g" 옵션이니 sudo (관리자 계정) 으로 설치하자.

npm install -g @vue/cli
vue --version

 

2. Create Electron App (Vue CLI 를 이용하여 프로젝트 생성)

vue create MyProjectName

그럼 다음처럼 Vue.js 버전을 선택하라고 나오는데.. 이번 기회를 이용해 Vue 3 을 사용해볼 생각했기에 3를 설치하겠다.

Electron Vue 버전 선택

3. 이제 Electron Builder 를 설치한다 (Vue CLI)

vue add electron-builder

그럼 갑자기 다음과 같은 메세지가 나타와서 살짝 당황;;

현재 커밋되지 않은 사항이니 먼저 커밋하거나 Stash 하는 것을 권장한다느니;; 그래서 일단 진행한다고 "y"

열심히 설치 일렉트론 버전을 선택하라고 함.

13 ㄱㄱ

4. 이제 Vuetify 를 추가해봅시다

vue add vuetify

vuetify 를 추가하는 커맨드를 입력하면 위와 동일하게 커밋으로 겁주는데 일단 ㄱ!

Preset 선택 3번째 ㄱㄱ

마음같아서는 recommended 를 선택하고 싶었지만 그동안 눈여겨보았던 Vite 와 같이 설치해보기로 한다. Vite 에 대한 내용은 링크를 통해 확인해보기 바란다.

해서 일단 필요한건 다 추가한거 같으니 돌려봅시다!!

그랬더니;;; ㅅㅂ;;

vuetify undefined

머임;; 내가 여태 머했는데;;  그래서 Vite 에 대해 삽질하다간 일단 보류;; ㅋㅋㅋ
장렬하게 Default (Recommended) 를 선택. 그래도 곧이어 에러가 발생한다.

ㅡㅡ;;

🚀  Invoking generator for vue-cli-plugin-vuetify...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/runTransformation.js:60:17)
    at /usr/local/lib/node_modules/@vue/cli/lib/Generator.js:332:23
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:318:24)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async Generator.generate (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:204:5)
    at async runGenerator (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:111:3)
    at async invoke (/usr/local/lib/node_modules/@vue/cli/lib/invoke.js:92:3)

해서 이 부분은 난 이렇게 해결했다

npm install --save babel-plugin-component

해서 혹시 똑같은 삽질을 겪으실수도 있는 분들을 위해 다음 파일들 내용을 공유합니다.

• package.json
• vue.config.js
• babel.config.js
• @/src/main.js

// @file : package.json

{
  "name": "example-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps"
  },
  "main": "background.js",
  "dependencies": {
    "@mdi/font": "5.9.55",
    "core-js": "^3.8.3",
    "element-plus": "^2.0.4",
    "roboto-fontface": "*",
    "vue": "^3.2.13",
    "vuetify": "npm:@vuetify/nightly@next",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-component": "^1.1.1",
    "electron": "^13.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.38.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-cli-plugin-vuetify": "~2.4.7",
    "vuetify-loader": "^2.0.0-alpha.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

// @file : vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	pluginOptions: {
		vuetify: {
			// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
		}
	}
})

// @file : babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    
  ]
}

// @file : @/src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(vuetify)
  .mount('#app')

해서 최종적으로 Vuetify.js 가 적용된 App 구동 된것을 캡쳐로 마무리 합니다.

Electron Vue App

휴우