Nuxt アプリを立ち上げてディレクトリ構造を見る

why

仕事で Nuxt を使っていて、下記の目的を1から実装できるようになりたいため。

S3 に静的サイトを上げられるようになったし、個人サイトの人と会ったり Zoom したりゲームする予約フォームを作成したい。Vue で。

To Do -- 目的

Nuxt での基本的な _id や new などの登録編集時の動作、

そこにおけるコンポーネントの使い方を理解する

input 周りの vuetify での v- シリーズを継承した UI パーツ作成をできるようになる

v-date-picker

v-checkbox

v-select

など。

Not To Do -- 今回はやらないこと

DB を用いたバックエンドの処理。

フォームの送信もメールに飛ばすだけにする予定。

install

ja.nuxtjs.org

公式を参考にしてセットアップする

npx create-nuxt-app nuxt-basic-crud
Need to install the following packages:
  create-nuxt-app
Ok to proceed? (y) 
y

npx を使って React と同じように create する。

✨  Generating Nuxt.js project in nuxt-basic-crud
? Project name: nuxt-basic-crud
? Programming language: (Use arrow keys)
❯ JavaScript 
  TypeScript

JS か TS かを聞かれる。今回は JS を選択する

? UI framework: (Use arrow keys)
❯ None 
  Ant Design Vue 
  BalmUI 
  Bootstrap Vue 
  Buefy 
  Chakra UI 
  Element 
  Framevuerk 
  Oruga 
  Tachyons 
  Tailwind CSS 
  Windi CSS 
  Vant 
  View UI 
  Vuetify.js

UI フレームワークを聞かれる

今回は要素を少なくするためになし。

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ Axios - Promise based HTTP client
 ◯ Progressive Web App (PWA)
 ◯ Content - Git-based headless CMS

モジュールは分からないが、一番上に出ている Axios を選択しておく。

? Rendering mode: Universal (SSR / SSG)
? Deployment target: (Use arrow keys)
❯ Server (Node.js hosting) 
  Static (Static/Jamstack hosting)

deploy が node.js か static を聞かれる。迷うが Node.js にしておく。

? Version control system: Git
⠦ Installing packages with npm

version 管理まで入れると、選択したパッケージ管理ツールでの install が始まる。

🎉  Successfully created project nuxt-basic-crud

  To get started:

    cd nuxt-basic-crud
    npm run dev

  To build & start for production:

    cd nuxt-basic-crud
    npm run build
    npm run start

そして install された。

選択肢が多かったな...

start

npm run dev

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.7                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                    16:13:43
ℹ Initial build may take a while                                                                                                       16:13:43
ℹ Discovered Components: .nuxt/components/readme.md                                                                                    16:13:43
✔ Builder initialized                                                                                                                  16:13:43
✔ Nuxt files generated                                                                                                                 16:13:43

✔ Client
  Compiled successfully in 4.23s

✔ Server
  Compiled successfully in 3.88s

ℹ Waiting for file changes                                                                                                             16:13:48
ℹ Memory usage: 189 MB (RSS: 297 MB)                                                                                                   16:13:48
ℹ Listening on: http://localhost:3000/

localhost 3000 で動いた

f:id:kei_s_lifehack:20210726161514p:plain

これが最初の画面になる。

ファイル構成

.. (up a dir)
/Users/kaede/code/nuxt-basic-crud/
▾ components/
    NuxtLogo.vue
    Tutorial.vue
▸ node_modules/
▾ pages/
    index.vue
▾ static/
    favicon.ico
▾ store/
    README.md
  nuxt.config.js
  package-lock.json
  package.json
  README.md