Vue.js 3 정리 : vue-cli4, 일렉트론 빌더, vuetify 설치 & 사용법

2179 단어 vueelectronelectron

vue-cli3 ?

vue-cli는 뷰로 새로운 프로젝트를 만들어주고 관리할 수 있는 터미널 툴이다.
바로 이 vue-cli가 버전2에서 버전3 & 4 로 바뀌며 편의 및 효율 면에서 상당한 변화가 생겼다.


기존의 vue-cli2의 프로젝트 생성

$ vue init repo/newProjectName

각 소스별로 각기 다른 설치요소들을 가지고 있었다.

새로운 vue-cli3 & vue-cli4 의 프로젝트 생성

$ vue create newProjectName

다양한 설정을 깔끔하게 내포하여. 바벨/웹팩의 설정을 공부하는 시간을 단적으로 줄여준다.

기본적인 설치요소들이 다 깔린 후 플러그인의 형태로 설치되는 방식이다.




vue-cli4 설치하기

vue-cli3는 8.9 버전 이상의 Node.js를 요구한다.
이를 충족시켰다는 가정으로 아래와 같이 vue-cli4를 전역옵션으로 설치한다

npm i -g @vue/cli
vue --version #버전확인


vue 프로젝트 생성

vue create newProjectName


플러그인 설치


electron-builder 설치 PLUG-IN

$ vue add electron-builder 

vuetify 설치 PLUG-IN

$ vue add vuetify

실행하기

개발용

$ yarn electron:serve

배포용

$ yarn electron:build



REF :

vue.js 3 총정리(*) : https://velog.io/@kdeun1/Vue-3-Composition-API-TypeScript-Vuex-4%EB%A1%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B5%AC%EC%84%B1%ED%95%98%EA%B8%B0
vue-electron 데스크톱 앱만들기 : https://arikong.tistory.com/8
official docs : https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/#installation
memi님 튜토리얼 : https://fkkmemi.github.io/electron/electron-05-vuecli3-update/

좋은 웹페이지 즐겨찾기