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:serveVuetifyが適応されていることが確認できます。

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'-
前の記事
windows10の隠し機能「GodMode」の利用手順 2020.01.15
-
次の記事
Ubuntu19.10 API Blueprintをインストールして利用する 2020.01.15
コメントを書く