Windows10にフレームワークnuxt.js環境を構築する

2022年7月18日

環境

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
C:\>node --version
v14.18.3
C:\>npm --version
6.14.15
C:\>node --version v14.18.3 C:\>npm --version 6.14.15
C:\>node --version
v14.18.3
C:\>npm --version
6.14.15

Windows10  Home 64bit

操作方法
1.vue-cliをインストールします。
C:\>npm i -D vue-cli

2.testプロジェクトを作成します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
C:\>vue init nuxt-community/starter-template test
全部ENTERキーを押下します。
To get started:
cd test
npm install # Or yarn
npm run dev
C:\>vue init nuxt-community/starter-template test 全部ENTERキーを押下します。 略 To get started: cd test npm install # Or yarn npm run dev
C:\>vue init nuxt-community/starter-template test
全部ENTERキーを押下します。
略
   To get started:

     cd test
     npm install # Or yarn
     npm run dev

3.testプロジェクトに移動します
C:\>cd test

yarnのインストール

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
C:\test>yarn install
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 2.21s.
C:\test>yarn install yarn install v1.22.17 [1/4] Resolving packages... success Already up-to-date. Done in 2.21s.
C:\test>yarn install
yarn install v1.22.17
[1/4] Resolving packages...
success Already up-to-date.
Done in 2.21s.

4.開発サーバーを起動します

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
C:\test>npm run dev
> test@1.0.0 dev C:\test
> nuxt
i NuxtJS collects completely anonymous data about usage. 05:49:33
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.15.8
│ │
│ ▸ Environment: development │
│ ▸ Rendering: server-side │
│ ▸ Target: server │
│ │
│ Listening: http://localhost:3000/ │
│ │
╰───────────────────────────────────────╯
i Preparing project for development 05:54:31
i Initial build may take a while 05:54:33
√ Builder initialized 05:54:33
√ Nuxt files generated 05:54:33
√ Client
Compiled successfully in 58.30s
√ Server
Compiled successfully in 53.48s
i Waiting for file changes 05:55:52
i Memory usage: 188 MB (RSS: 260 MB) 05:55:52
i Listening on: http://localhost:3000/
C:\test>npm run dev > test@1.0.0 dev C:\test > nuxt i NuxtJS collects completely anonymous data about usage. 05:49:33 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.15.8 │ │ │ │ ▸ Environment: development │ │ ▸ Rendering: server-side │ │ ▸ Target: server │ │ │ │ Listening: http://localhost:3000/ │ │ │ ╰───────────────────────────────────────╯ i Preparing project for development 05:54:31 i Initial build may take a while 05:54:33 √ Builder initialized 05:54:33 √ Nuxt files generated 05:54:33 √ Client Compiled successfully in 58.30s √ Server Compiled successfully in 53.48s i Waiting for file changes 05:55:52 i Memory usage: 188 MB (RSS: 260 MB) 05:55:52 i Listening on: http://localhost:3000/
C:\test>npm run dev

> test@1.0.0 dev C:\test
> nuxt


i NuxtJS collects completely anonymous data about usage.                                                      05:49:33
  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.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯
i Preparing project for development                                                                           05:54:31
i Initial build may take a while                                                                              05:54:33
√ Builder initialized                                                                                         05:54:33
√ Nuxt files generated                                                                                        05:54:33

√ Client
  Compiled successfully in 58.30s

√ Server
  Compiled successfully in 53.48s

i Waiting for file changes                                                                                    05:55:52
i Memory usage: 188 MB (RSS: 260 MB)                                                                          05:55:52
i Listening on: http://localhost:3000/

5.下記URLにアクセスします
http://localhost:3000/
「Nuxt.js project」が表示されます。

Nuxt.js

Posted by arkgame