「どうして、この山のような仕事を一人だけで片づけようとするのか。」

第3章が長かったせいでシナイ半島をだいぶさまよった気になりましたが、まだサーバサイドがなんとか動いただけです。

預言します。

「おお、見よ！第4章はもっと長くなるであろう！」

海ならぬ腹を割ったところで、クライアントサイドの準備をしていきましょう。

創世記で触れましたが、Vue.jsとはSPAフレームワークです。
といっても、結局ブラウザで動くのはHTMLとJavaScriptとCSSでしかありません。
Vue.jsで書いたソースをコンパイルして配信する静的コンテンツを生成します。
言語から他言語へのコンパイルなので、トランスパイルと言います。

それではVue.jsの開発環境であるVue CLIをnode.jsで導入します。
node.jsはサーバサイドJavaScript環境です。

Cloud9にも入っています。さすが。
バージョンを見てみましょう。
デフォルトのパッケージマネージャのnpmも見ます。

$ node -v
v10.17.0
$ npm -v
6.11.3

ちょっと古いですね。
最新化します。

$ nvm install v13.3.0
$ nvm alias default v13.3.0
$ node -v
v13.3.0
$ npm update -g npm
$ npm -v
6.13.4

npmより速いパッケージマネージャのyarnをインストールします。
npmもだいぶ早くなったようですが、いまだyarnの方が早いようです。

qiita.com

$ npm install -g yarn
$ yarn -v
1.21.1

2年前はyarn initでプロジェクトを作ったのですが、最新ではvueコマンドが便利になっているようです。
そちらでやってみます。

qiita.com

Vue.js開発環境であるVue CLIをインストール。

$ yarn global add @vue/cli
$ vue -V
bash: vue: command not found

はい、パスが通っていないので.bashrcでPATHにyarn global binの結果を追加します。
PATHに直接yarn global binと書くとターミナルを開きなおしたときにyarnが認識されないっぽいので結果を書きました。

export PATH="$PATH:$HOME/.rvm/bin:/home/ec2-user/.yarn/bin"

Window→New Terminalでターミナルを開きなおしてみます。

$ vue -V
@vue/cli 4.1.1

うん、パスが認識できています。
それでは、Vue.jsプロジェクトを作成します。

$ vue create clientside

f:id:chief-shuffle:20191219140021j:plain

設定値はこんな感じかなー。
使わないかもしれないのは入れない方がいいかなー。
2年前はいちいち1個ずつ入れてた気がします。

preset：Manually select features
features：Babel, Router, Vuex, CSS pre-processors, Linter / Formatter, Unit Testing, E2E Testing
history mode：Yes
CSS pre-processors：Stylus
linter / formatter：Prettier
additional lint features：Lint on save
unit testing：Jest
E2E testing：Nightwatch
browsers：Chrome
config ：In package.json
Save：N

「こんなやり方を続けていたら、あなたのほうがまいってしまうよ。」

インストールが終わりました。

f:id:chief-shuffle:20191219214138j:plain

1 error found.

E2E Testing系のjsでエラーですね。
console.log()が認識されないことってある？
まあいいか。E2Eやるときに考えましょう。

Vue CLIのサーバを起動します。

yarn serve

画面を確認してみます。
http://localhost:8080/とか表示されますが、Cloud9なので当然アクセスできません。
「Preview」メニューから「Preview Running Application」で起動します。

f:id:chief-shuffle:20191219223035j:plain

はいー、セキュリティ制限に引っ掛かりました。
「Invalid Host header」です。
プロジェクトフォルダ直下にvue.config.jsを作成します。

module.exports = {
  devServer: {
    disableHostCheck: true
  }
}

もっかい起動＆プレビュー。

f:id:chief-shuffle:20191219221505j:plain

表示できました。

「何もかも一人で片づけるには、荷が重すぎるのではないかな。」

ちなみにプロジェクトフォルダ直下に作成されているsrc/App.vueの一部（HomeとAboutの部分）をいじると、

f:id:chief-shuffle:20191219221953j:plain

ホットデプロイが走って、プレビューをリロードすると変更が反映されてます。

f:id:chief-shuffle:20191221085744j:plain

よしよし。

ん、App.vueでシンタックスエラーが出てますね。
.vueファイルの<style>タグ内のStylus記述を理解できていないようです。
エディタ右下のHTMLを「Stylus」に変更します。

f:id:chief-shuffle:20191221090123j:plain

他の.vueファイルもエラーが出てるファイルも「Stylus」に変えて、
あと、エラーが出てるやつは…

f:id:chief-shuffle:20191221090430j:plain

む。src/router/index.jsでパースエラーです。
Unexpected token importと出ています。
「こんなところでimportすんじゃねぇ、このすっとこどっこい！」と怒られています。
Vue CLIを起動するときは怒られないので、Cloud9の設定はESLintと少し違うようです。
力技ですが、「Preference」の「Hint & Warning」で「Ignore Message Matching」の欄にUnexpected token importを入れて警告を消しました。

f:id:chief-shuffle:20191221090938j:plain