やったこと
npm install -g を使わずにWindowsにVue CLI 3 と Electron環境を作る
経緯
ただでさえ環境が壊れやすいWindowsで、Node.jsのバージョン切り替え環境すら用意してないのに npm install -gは絶対運用できない
やりかた
[Vue.js] Vue CLI 3 で electron-vue の環境を構築する方法
ベースはこれ
yarnを動かす
まず、適当なフォルダ（プロジェクト）を作る
test-pj
プロジェクト内で
npm init npm install yarn
を実行すると、
test-pj
┣node_modules
┣package.json
┣package-lock.json
とかのいつもの感じになると思う。
npm install -g yarnを使っていると、この時点でyarn add hogeが使えるのだが、-gをつけていないため、パスが通っておらずそのままでは使うことができない
そこで登場するのがこれである
僕がnpm installに-gをつけないわけ - Qiita
package.jsonの、scriptsに、
"scripts": { "yarn": "yarn" }
と書いてやれば
npm run yarnで、yarnが動く
いちいちnpm runって入れるのが面倒なら、aliasにでも登録しておけばいいと思う
vue-cliのインストール
yarnが動くのが確認できたら、
yarn add @vue/cli
でOK
そしてscriptsに
"scripts": { "yarn": "yarn", "vue": "vue" }
といった形で追記
npm run vueで動くのでaliasが云々
vueプロジェクトの作成
npm run vue create project-name
で、vueプロジェクトが作れる。
いろいろ質問されるけど割愛、とりあえずDefaultでいいんじゃない
ファイル構造はこうなる
test-pj
┣node_modules
┣project-name
┣node_modules
┣src
┣package.json
など
┣package.json
┣package-lock.json
はい、最悪ですね
これが、npm install -gを行わないことによる最大のデメリットだと思う
プロジェクト構造が終わってしまう
解決方法は現在思いついていないので、知ってる人が教えて下さい
vue+Electron
おそらく、vue-cliのインストールが終わると
cd project-name yarn serve
とか言われるが、動かない
なぜならproject-nameにはyarnがインストールされていないからである
なので、project-name下でnpm install yarnを走らせる必要がある
yarnのインストールができたら、project-nameのpackage.jsonのscriptに同じように追記
これで、npm run yarn serveが動くはずなので、とりあえず実行してみて動作確認
動いたら
npm run yarn add @vue/cli
を実行しよう
これは決して頭がおかしくなったわけではなく、Electronのインストールに必要だからである
インストールできたらpackage.jsonのscriptに追記
npm run vue add electron-builder
を実行しよう
インストールができたら
npm run electron:serve
を実行しよう
scriptsには自動で追記されている（嬉しい！）
うまくできていれば、Chromiumが立ち上がるはずである
以上！
