electron-vueを導入する

2616 ワード
Vue.js Electron JavaScript framework JavaScript テキストリンク

この記事について

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 chromeと同様のchromium driverを使用しているので、developer toolsが使用できます。

これでelectron-vueの導入は完了です。