
どうも、カムノです。
前回の記事でVue.js (vue-cli) をインストールしましたが、今回はこれに「Nuxt」を導入して「Hello World」的なことをしたいと思います!
というわけで、「2018/12/08時点の最新情報」をお届けします。
- 1. Nuxtを導入
- 1.1. 作業用のフォルダを作って、Visual Studio Codeで開く
- 1.2. WorkSpaceとして保存
- 1.3. Visual Studio Code のターミナルを開く
- 1.4. 「hello-world」プロジェクトを作成
- 1.4.1. createコマンドを実行
- 1.4.2. プロジェクト名を設定
- 1.4.3. プロジェクトの説明を設定
- 1.4.4. サーバーサイドのフレームワークを設定
- 1.4.5. UI フレームワークを設定
- 1.4.6. Nuxt のモードを設定
- 1.4.7. 「axios module」を使用するかどうかを設定
- 1.4.8. 「eslint」を使用するかどうかを設定
- 1.4.9. 「prettier」を使用するかどうかを設定
- 1.4.10. Author nameを設定
- 1.4.11. パッケージマネージャーを設定
- 1.4.12. ここまで進むと、設定した内容で自動的にプロジェクトが作成されます!
- 1.4.13. プロジェクト完成!
- 1.4.14. 「yarn run dev」を実行してみる
- 1.4.15. 何もしてないのにエラーがでた。(常套句)
- 1.4.16. 「prettier」さんに怒られてますよ先生。
- 1.4.17. Visual Studio Code のターミナルで「Ctrl+C」を押して一旦止めます。
- 1.4.18. 「yarn run build」を実行
- 1.4.19. 「yarn start」を実行
- 1.4.20. ローカルテストを開いてみましょう
- 1.4.21. 基本的には、pagesフォルダ内の「.vue」ファイルが本体
Nuxtを導入
公式ドキュメントが素敵なので、細かい点が気になったらこれを見てネ!
それでは、MacBookProのスクリーンショットを使って解説していきます!
作業用のフォルダを作って、Visual Studio Codeで開く
WorkSpaceとして保存
保存場所はどこでもOKです。
Visual Studio Code のターミナルを開く
「hello-world」プロジェクトを作成
createコマンドを実行
1 |
yarn create nuxt-app hello-world |
一番右の「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」を実行
おk。こちらは大丈夫ですね。
「yarn start」を実行
ローカルテストを開いてみましょう
URL部分をCmd+クリックするか、「http://localhost:3000/」をブラウザで開きます。
こいつ・・・動くぞ!
(出展:機動戦士ガンダム 第1話)
基本的には、pagesフォルダ内の「.vue」ファイルが本体
見慣れないタグがいると思いますが、すごくいい奴らなので仲良くしてやってください。
ここからが本番ですが、今日のところはここまで!