Vue.jsでホームページを作ってみよう！（開発環境準備編 その２）

どうも、カムノです。

前回の記事でVue.js (vue-cli) をインストールしましたが、今回はこれに「Nuxt」を導入して「Hello World」的なことをしたいと思います！

というわけで、「2018/12/08時点の最新情報」をお届けします。

Nuxtを導入

公式ドキュメントが素敵なので、細かい点が気になったらこれを見てネ！

それでは、MacBookProのスクリーンショットを使って解説していきます！

作業用のフォルダを作って、Visual Studio Codeで開く

WorkSpaceとして保存

保存場所はどこでもOKです。

Visual Studio Code のターミナルを開く

「hello-world」プロジェクトを作成

createコマンドを実行

一番右の「hello-world」の部分がプロジェクトのフォルダ名になります。

プロジェクト名を設定

何も入力せずにそのままEnterでコマンド実行時のフォルダ名と同じになります。

プロジェクトの説明を設定

サーバーサイドのフレームワークを設定

今回は「none」にします。

UI フレームワークを設定

今回は「buefy」にします。

Nuxt のモードを設定

今回は「Universal」にします。

「axios module」を使用するかどうかを設定

今回は「yes」にします。

「eslint」を使用するかどうかを設定

今回は「yes」にします。

「prettier」を使用するかどうかを設定

今回は「yes」にします。

Author nameを設定

パッケージマネージャーを設定

今回は「yarn」にします。

ここまで進むと、設定した内容で自動的にプロジェクトが作成されます！

プロジェクト完成！

ご親切にコマンドまで教えてくれてます。早速やってみましょう。

「yarn run dev」を実行してみる

なにやらエラーが。（画像上部）

いったん気にせずローカルテストを開いてみよう。（画像下部）

何もしてないのにエラーがでた。（常套句）

「prettier」さんに怒られてますよ先生。

Visual Studio Code のターミナルで「Ctrl+C」を押して一旦止めます。

後でどうせ書き換えるので「prettier」さんのことは一旦置いといて、「build & start」のほうで見てみましょうか。

「yarn run build」を実行

おｋ。こちらは大丈夫ですね。

「yarn start」を実行

ローカルテストを開いてみましょう

URL部分をCmd+クリックするか、「http://localhost:3000/」をブラウザで開きます。

こいつ・・・動くぞ！

（出展：機動戦士ガンダム 第1話）

基本的には、pagesフォルダ内の「.vue」ファイルが本体

見慣れないタグがいると思いますが、すごくいい奴らなので仲良くしてやってください。

ここからが本番ですが、今日のところはここまで！