【Nuxt.js】プロジェクトを作成してみる

【Nuxt.js】プロジェクトを作成してみる

はじめに

コジマです。

nuxt使うとvueの開発が楽になるとのことで
npxコマンドを使ってnuxt.jsのプロジェクトを作成してみます。

環境はWindowsで、コマンドラインはPowerShellで実行しています。

基本これに従ってます。公式バンザイ。
https://ja.nuxtjs.org/guide/installation/

バージョンの確認

以下のコマンドを実行して、npm,npxのバージョンを確認します。

プロジェクトの作成

npx create-nuxt-app プロジェクト名コマンドでプロジェクトを作成します。
今回はhello-worldとしました。

実行結果は以下。
諸々質問されるので、お好みで選択します。
バージョンによって質問が変わるっぽいです。
自分は以下のようにしました。

=>デフォルト(hello-world)

=>デフォルト(My neat Nuxt.js project)

=>kojimaとした

=>Npmとした

=>Bootstrap Vueとした

=>None (Recommended)とした

=>Axiosとした

=>ESLintとした

=>None

=>Universal (SSR)とした

=>jsconfig.json (Recommended for VS Code)とした

以上でインストールが始まります。

作成されたファイルの確認

できあがったものを確認します。

実行結果

いろいろできています。
プロジェクト作成時の選択肢によってここは変化がありそうです。

サーバー起動

以下のコマンドを実行

実行結果

最後にhttp://localhost:3000で接続して、TOP画面が表示されれば完了です。

さいごに

nuxtってルーティング設定いらないのやばやばですね。
nodeとvueとnuxtの関係性も見えてきたところです。

まだまだ駆け出しですが、頑張っていきますよー

この記事を面白いまたは役に立ったと思ってくれた方は是非私のTwitter(@kojimanotech)を
フォローしてくれたらうれしいです!

以上、コジマでした。


Vue.js/Nuxt.jsカテゴリの最新記事