はじめに

ゴミみたいな画面のアプリを量産するSIerに所属しており、画面を作るのはプロジェクトに代々伝わるExcelマクロでhtmlとCSSを吐き出してJSPに変換みたいな経験しかない私です。
フロント経験０の人間がいきなりNuxt.jsを使うことになったのでお勉強を兼ねて投稿。
現代の文明に触れた人間のメモみたいなノリです。

現在の知識

JavaScript：JavaでWebシステム作る中でどうしても触るので一応知っている。最近はアロー関数使えるのを知った
jQuery：前職でわずかに触った。フロントといえばこれ
Vue.js：Udemyの動画講座を少し視聴した
Nuxt.js：ぬ…なくすとじぇーえす

こんな状態だったので最近のフロントの進化に初めて触れます。
Vueの知識を勉強しつつも、プレーンなVueをお勉強する時間もないのでいきなりNuxtから入りたいと思います。
ちなみに、前職で扱っていたシステムは「技術的問題で画面にグラフを表示させることができません」とか平然と言うようなシステムだったのですが、最近のWebシステムは本当にリッチになりましたね。

導入

公式を参考に導入していきます。
https://ja.nuxtjs.org/guide/installation

環境

macOS　Mojava 10.14.4
エディタ VisualStudioCode
npx 6.14.7
node ~~8.1.4~~ →14.8.0

npxでアプリ作成

私の環境にはすでにnpxがインストールされていたため、いきなりコマンド実行します。

terminal

npx create-nuxt-app vue_todolist

Unexpected token…　が返ってきました。
どうやらNodeのバージョンが古すぎるみたいです。
Version10以上が必要なようなので、nodebrew use latestコマンドを実行して最新版のNodeに切り替えました。

気を取り直して最新版のNodeで実行するとうまくいきました。
今回は以下の設定でいきます。

設定

Project name：vuetodolist
Programming language:JavaScript(TypeScriptも選べるがわからないのでやめときます）
Package manager: Npm（Yarmは使ったことないので）
UI framework:Bootstrap Vue(Bootstrapは聞いたことあるのでこれにします）
Nuxt.js modules:選択なし（Axiosとかここで入れられるみたいなのですがわからないのでなし）
Linting tools:ESLint（有名らしいのでこれにしておきます）　
Testing framework: None(お試しでテストしないので）
Rendering mode:Universal (SSR / SSG) （ここでSPAに切り替えもできるみたい）
Deployment target: Static (Static/JAMStack hosting)
Development tools:選択なし

地味に選択する項目が多いですね…設定項目については公式ドキュメントに詳しく書かれているので参考にしてください。

正常に終了すると以下の表示になります。Terminalに絵文字出るとちょっとうれしいですね。

terminal

🎉  Successfully created project vuetodolist

VSCodeで読むこむ

VSCodeのフォルダを開くから生成されたプロジェクトフォルダを開きます。
.gitがすでに作成されていたのですが私だけ？

npm runする

ターミナルを開いてビルドします（ビルドであっているのだろうか？）

terminal

npm run dev

私の環境では以下ポートで起動しました。
http://localhost:3000/

Chromeでアクセスすると以下の画面が表示されます。

とりあえずの環境構築はこれで完了です。
ScriptタグでjQuery読み込んでだ頃とは随分違うんですね…