Post

[프로젝트 생성하기] electron과 Vue.js로 CUI프로그램에 GUI넣기(2)

대충 프로젝트를 어떻게 할지 정했으니 시작해보자.
내 컴퓨터는 산지 얼마 안돼서 개발 관련 프로그램이 하나도 안깔려있었으니.. 깔아야 하는 것은 다음과 같다.

  1. Python
  2. Node.js(npm 사용을 위해)
  3. Vue cli

Node.js는 홈페이지 가서 깔면 된다.
Vue는 다음과 같은 설정으로 프로젝트를 생성했다.

1
2
3
4
5
6
7
8
9
10
$ vue create command-runner
Vue CLI v4.5.14
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

원래는 3을 쓰고싶었는데.. vuetify가 아직 3을 지원 안한다..^^
이렇게 만들어 준 프로젝트에 electron과 vuetify를 깔아주자.

1
2
$ vue add electron-builder
$ vue add vuetify

만들었으니 한번 실행을 해볼까?

1
$ npm run electron:serve

이렇게 실행이 되는 것을 볼 수 있다. 야호!
실행사진

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.