Ionic vueの環境構築でハマった

なぜIonic vueの環境構築をしたのか

普段業務でionic/Angularで開発を行っているのですが、今後社内フレームワークがAngularからVueにシフトしていくという話になっており、AngularとVueの違いをちゃんと理解したいなと思って始めました。

どこでハマったのか

Ionic Vueクイックスタートを見てインストールを進めていくのですが…

ionic start vue-sample blank --type vue

の部分で下記のようなエラーが出てしまいました。

npm ERR! Cypress cannot write to the cache directory due to file permissions
npm ERR! 
npm ERR! See discussion and possible solutions at
npm ERR! https://github.com/cypress-io/cypress/issues/1281
npm ERR! 
npm ERR! ----------
npm ERR! 
npm ERR! Failed to access /Users/toshiya.sato/Library/Caches/Cypress:
npm ERR! 
npm ERR! EACCES: permission denied, mkdir '/Users/xxx.xxx/Library/Caches/Cypress'

permission deniedなので権限周りだな…ということで

• chmodで権限を777に変更
• sodoで実行

は試しましたが、効果はなし

次にエラーメッセージに出てくるissue1281を確認

インストールが上手く行ってない？と思い、記事に書いてあるコマンドを実行してみる（これもよくなかった気がする）も効果なし

npm install --save-dev cypress

その後解決せず、色々調べて数時間…
プロジェクト名を変えたりして実行してみてもダメだったので、実行フォルダの状況を確認すると上位フォルダに見覚えのない奴らが

• package.json
• package-lock.json
• node_modules

おや？と思い、上記は削除し、別のフォルダ階層を作って再実行すると何事もなく成功しました！

ということで、原因はわからないままなのですが、無事解決しました。
検索しても同じようなエラーにハマった人はいないようだったので、もし同じようなことが起きた人の役に立てればと思い、記録として残します。（あんまりいない気がしますが）

次回は本題のAngularとVueの違いを体感した感想を記事にできればと思ってます。