Windows10にフレームワークnuxt.js環境を構築する
環境
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プロジェクトを作成します
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のインストール
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.開発サーバーを起動します
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」が表示されます。