VueCLIからelectron-vue.jsをインストールしてVuetifyを利用する

VueCLIからelectron-vue.jsをインストールしてVuetifyを利用する

VueCLIを利用しないとVuetifyをelectron-vueで利用できないので、VueCLI をから electron-vue の環境を構築する

環境

  • OS  windows10 pro
  • node V10.16.3
  • npm 6.9.0
  • @vue/cli 4.1.1
  • Electron 6.0.12

VueCLIインストール

今回はグローバルでインストールしてます

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

プロジェクト作成

vueCLIでプロジェクトを作成します。今回はvuecli-testという名前で作成してます。

vue create vuecli-test

<出力結果>
Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)

今回はdefaultのままでENTERキーを押下してます

electron-builderを追加します

vue add electron-builder

<出力結果>
? Choose Electron Version ^6.0.0

V6を指定します

インストールが終わったので、とりあえず、起動してみます

npm run electron:serve

起動できることが確認できます

Vuetifyインストール

次にVuetifyをインストールします

vue add vuetify

<出力結果>
? Choose a preset: (Use arrow keys)
> Default (recommended)

今回はDefaultを選択します

再度起動

npm run electron:serve

Vuetifyが適応されていることが確認できます。

VueCLIを利用していない場合

vuecliがインストールされていない環境でVuetifyをインストールしようとすると、下記のコマンドを実行しても何も起きません。

vue add vuetify

インストールしようとした環境にvue/cliがインストールされてなかったので、 vue/cliインストール後に、再度実行すると vue/cli からインストールされてないので、下記のエラーが発生します。

Running completion hooks... ERROR  
Error: ENOENT: no such file or directory, open 
'C:\Users\hoge\project-name\public\index.html'