Zenn
Closed6

学習ログ: Vueもろくに知らないけどNuxt.js入門する

Nuxt
Vue.js
初心者
ばつしい / vatscyばつしい / vatscy

環境構築

macOS Big Sur 11.1
公式ページを見ながら環境構築していく。
https://ja.nuxtjs.org/docs/2.x/get-started/installation

Node.jsは既に入っている。

$ node -v
v15.6.0
$ npm -v
7.4.0

create-nuxt-app していく。

$ npx create-nuxt-app nuxtjs_sandbox

create-nuxt-app v3.5.0
✨  Generating Nuxt.js project in nuxtjs_sandbox
? Project name: nuxtjs_sandbox
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Tailwind CSS
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git

🎉  Successfully created project nuxtjs_sandbox

  To get started:

	cd nuxtjs_sandbox
	npm run dev

  To build & start for production:

	cd nuxtjs_sandbox
	npm run build
	npm run start

  To test:

	cd nuxtjs_sandbox
	npm run test


  For TypeScript users. 

  See : https://typescript.nuxtjs.org/cookbook/components/

選択肢はなんとなくで決めた。本格的に使うときにはちゃんと調べる。

早速ランデブーしていく。

$ npm run dev

> nuxtjs_sandbox@1.0.0 dev
> nuxt-ts


ℹ NuxtJS collects completely anonymous data about usage.                                  00:40:32
  This will help us improve Nuxt developer experience over time.
  Read more on https://git.io/nuxt-telemetry

? Are you interested in participating? Yes


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

ℹ Preparing project for development                                                       00:40:53
ℹ Initial build may take a while                                                          00:40:53
✔ Builder initialized                                                                     00:40:53
✔ Nuxt files generated                                                                    00:40:53

✔ Client
  Compiled successfully in 16.44s

✔ Server
  Compiled successfully in 15.58s

ℹ Waiting for file changes                                                                00:41:15
ℹ Memory usage: 597 MB (RSS: 748 MB)                                                      00:41:15
ℹ Listening on: http://localhost:3000/                                                    00:41:15
No issues found.

表示できた！

ばつしい / vatscyばつしい / vatscy

↑履修完了。Nuxt.js開発を始めるにあたってcreate-nuxt-appを実行した後の細かな設定が載っていて大変参考になりました！

このスクラップは2024/05/01にクローズされました