이 기사에 대하여

electron에서 앱 개발을 시도했을 때 프레임 워크로 vue를 선택했습니다.
배포부터 템플릿 시작까지의 절차서입니다.
절차를 기억하기 위해 설명했습니다.

실행 환경

windows 10

초기 설정

electron-vue 도입
공식 페이지를 참조로 진행합니다.

미리 node.js 및 yarn 설치가 필요합니다.

# vue-cliをインストール
npm install -g vue-cli

# テンプレートを生成
vue init simulatedgreg/electron-vue プロジェクト名

모두 Enter에서 문제 없음.

? Application Name temp-project
? Project description An electron-vue project
? Select which Vue plugins to install axios, vue-electron, vue-router, vuex
? Use linting with ESLint? Yes
? Which eslint config would you like to use? Standard
? Setup unit testing with Karma + Mocha? Yes
? Setup end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? builder
? author ysks-y <[email protected]>

  vue-cli · Generated "temp-project".
---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

 $ cd temp-project
 $ yarn (or `npm install`)
 $ yarn run dev (or `npm run dev`)

프로젝트 템플릿을 만든 후 종속성 라이브러리를 넣습니다.
yarn 또는 npm 를 사용하여 도입할 수 있습니다.
※windows 환경에서 npm install 를 했을 때에 적절한 빌드 툴이 들어 있지 않았거나 낡은 버젼일 가능성이 있어, npm-windows-upgrade 를 사용하거나 하면 귀찮기 때문에 yarn

 cd プロジェクト名
 yarn # or npm install

nodejs의 버전으로 화가 났을 경우는 nodist 등으로 버전 관리하면 좋다고 생각합니다.

실행

성공적으로 완료되면 다음 명령으로 실행됩니다.

yarn run dev
# (or `npm run dev`)

Google 크롬과 유사한 chromium driver를 사용하고 있으므로 개발자 도구를 사용할 수 있습니다.

이것으로 electron-vue의 도입이 완료됩니다.