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

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

はじめに

コジマです。

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

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

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

バージョンの確認

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

> npm --version
6.9.0
> npx --version
6.9.0

プロジェクトの作成

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

> npx create-nuxt-app hello-world

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

npx: installed 341 in 47.561s

create-nuxt-app v2.10.1
✨  Generating Nuxt.js project in hello-world
? Project name (hello-world)

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

? Project description (My neat Nuxt.js project)

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

? Author name ()

=>kojimaとした

? Choose the package manager (Use arrow keys)
> Yarn
  Npm

=>Npmとした

? Choose UI framework (Use arrow keys)
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  Framevuerk
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js

=>Bootstrap Vueとした

? Choose custom server framework (Use arrow keys)
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro

=>None (Recommended)とした

? Choose Nuxt.js modules (Press  to select,  to toggle all,  to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA) Support

=>Axiosとした

? Choose linting tools (Press  to select,  to toggle all,  to invert selection)
>( ) ESLint
 ( ) Prettier
 ( ) Lint staged files

=>ESLintとした

? Choose test framework (Use arrow keys)
> None
  Jest
  AVA

=>None

? Choose rendering mode (Use arrow keys)
> Universal (SSR)
  Single Page App

=>Universal (SSR)とした

? Choose development tools (Press  to select,  to toggle all,  to invert selection)
>( ) jsconfig.json (Recommended for VS Code)

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

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

🎉  Successfully created project hello-world

  To get started:

        cd hello-world
        npm run dev

  To build & start for production:

        cd hello-world
        npm run build
        npm run start

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

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

> cd .\hello-world\
> ls

実行結果

    ディレクトリ: XXXXX\hello-world


Mode                LastWriteTime         Length Name
----                -------------         ------ ----
d-----       2019/09/09     14:09                assets
d-----       2019/09/09     14:09                components
d-----       2019/09/09     14:09                layouts
d-----       2019/09/09     14:09                middleware
d-----       2019/09/09     14:09                node_modules
d-----       2019/09/09     14:09                pages
d-----       2019/09/09     14:09                plugins
d-----       2019/09/09     14:09                static
d-----       2019/09/09     14:09                store
-a----       2019/09/09     14:09            207 .editorconfig
-a----       2019/09/09     14:09            244 .eslintrc.js
-a----       2019/09/09     14:09           1268 .gitignore
-a----       2019/09/09     14:09            209 jsconfig.json
-a----       2019/09/09     14:09           1208 nuxt.config.js
-a----       2019/09/09     14:09         418943 package-lock.json
-a----       2019/09/09     14:09            662 package.json
-a----       2019/09/09     14:09            381 README.md

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

サーバー起動

以下のコマンドを実行

> npm run dev

実行結果

> hello-world@1.0.0 dev XXXX\hello-world
> nuxt


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.9.2                            │
   │   Running in development mode (universal)   │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

i Preparing project for development                                                                           14:10:42
i Initial build may take a while                                                                              14:10:42
√ Builder initialized                                                                                         14:10:42
√ Nuxt files generated                                                                                        14:10:42

* Client █████████████████████████ building (32%) 185/198 modules 13 active
 vue-loader » eslint-loader » components\Logo.vue

* Server █████████████████████████ building (17%) 63/64 modules 1 active
 vue-loader » components\Logo.vue

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

さいごに

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

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

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

以上、コジマでした。