windows10 electron-vueをインストールする

electron アプリケーション を開発するにあたり、vue を使用することにしたのでインストール手順を記載
※nodejsがインストールされることが前提
window10にnodejsのインストール手順はこちら
環境
windows10 pro
インストール
nodejsのインストール手順はこちら
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
## インストール npm i -D vue-cli ## プロジェクトを作成 vue init simulatedgreg/electron-vue test-project <入力> ? Application Name test-project ? Application Id com.example.yourapp ? Application Version 0.0.1 ? Project description An electron-vue project ? Use Sass / Scss? No ? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-electron, vue-router, vuex, vuex-electron ? Use linting with ESLint? Yes ? Which ESLint config would you like to use? Standard ? Set up unit testing with Karma + Mocha? Yes ? Set up end-to-end testing with Spectron + Mocha? Yes ? What build tool would you like to use? builder vue-cli · Generated "test-project". warning Failed to append commit SHA on README.md ## 作成したtest-projectに移動 cd test-project ## npm installする npm install ## 実行する npm run dev |
下記の画面が起動すれば、問題なし

Hello Worldページを作成してみる
test-project\src\renderer\components内に Hello.vue を作成する
1 2 3 4 5 6 7 8 9 10 11 |
<template> <div> <h1>Hello World!</h1> </div> </template> <script> export default { name: 'hello-page' } </script> |
test-project\src\renderer\router の index.js を下記のように編集する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'landing-page', component: require('@/components/LandingPage').default }, { path: '/hello', name: 'hello-page', component: require('@/components/Hello').default }, { path: '*', redirect: '/' } ] }) |
ここで、下記エラーが発生した場合は空白の問題
1 2 |
http://eslint.org/docs/rules/indent Expected indentation of 6 spaces but found 4 src\renderer\router\index.js:14:1 |
今回の場合は、空白が6個必要なのに4個しかないと言われているので調整する

※エラーはESlintの構文修正なので、面倒なら下記のコマンドを実行すれば修正できます
1 |
npm run lint:fix |
後は、test-project\src\renderer\components内のLandingPage.vueの中に下記のタグを追加
1 |
<router-link to="hello">Hello</router-link> |
リンクが作成される

作成されたリンクをクリックすると、helloページに遷移する

ビルド
ビルドはルートディレクト内で npm run build を実行する
1 2 |
## 今回のプロジェクトの場合 test-projectフォルダ内で実行 test-project> npm run build |
buildファルダが作成され、下図のファイルが作成される

-
前の記事
windows10にelectronをインストールする 2019.10.21
-
次の記事
CentOs8にRubyをインストール 2019.10.21
コメントを書く