この記事について
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 <ysks-y@example.Welcome>
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 chromeと同様のchromium driverを使用しているので、developer toolsが使用できます。
これでelectron-vueの導入は完了です。