Tortoise Shell

Webサービスの会社で働くデザイナーが、デザインやライフハックについてゆるく書き連ねるブログです。

AWS Cloud9でVue.jsの環境構築を試みるも、早くもつまづいた。

去年作ったポートフォリオサイトがあるのですが、プレーンなHTMLにCSS、jQueryという「ちょっと前のWebデザイナーが作るWebサイト」のままになっていました。

それでも用は足りているのですが、ヘッダーやフッターは共通化したいし、とはいえそれだけのためにWordPress等のCMSを導入するのは面倒くさい。

そのため、Vue.jsのテンプレート機能を使って良い感じにしつつ、モッダーンな感じのフロントエンド開発をキャッチアップしたいと思いました。

そこで、下記の本をやり始めたのですが、環境構築でさっそく壁にぶち上がって先行きが怪しいです。 

Vue.js&Nuxt.js超入門

Vue.js&Nuxt.js超入門

 

本のやり方と違う点としては、ローカルではなくAWS Cloud9上で環境構築をしようとしており、設定まわりの何かを良い感じにしないと npm run serve してもプロジェクトが表示されないようです。

1時間ほど調べていて、こちらのサイトのやり方で試したら、プロジェクトは表示されました。

medium.com

やったー!と思ったのですが、ちょっとモヤモヤが。

Vue CLIの公式ドキュメントを見る限り、「npm install -g vue-cli」という指定の仕方は、古いやり方のようです。

本だと「vue-cli」というところが、「@vue/cli」になっています。

もう勉強目的と割り切って、Vue CLIは古いバージョンで良いから、このまま本を進めてしまおうかな。

とはいえ、途中で乖離が出てきたら嫌だから、やっぱり本のとおりでやりたいなと思ったり。

Cloud9での環境構築の記事、なかなか少なくて、「Cloud9 Vue」でぐぐっても、微妙に古い記事しか見つからないんですよね。

AWS Cloud9じゃなくて、昔のCloud9の頃の話だったり、上のブログのように古いバージョンの話だったり。

やれやれです。

----

追記: 解決しました!

qiita.com