現在の常駐先のプロジェクトにてNuxt.jsによる開発を行うことになり、実験的にNuxtプロジェクトをインストールしてみた。
なお、この内容は公式ドキュメントを参考にしている。
Contents
Nuxt導入の手順
Nuxtプロジェクトの導入にはコマンドで質問に答えていく形式と、package.jsonを作成してスクラッチでインストールする方法の２通りある。
今回はコマンドを使用してインストールしてみた。
- yarn create nuxt-app 【App名】でインストール
- いくつかの質問に回答する
- 立ち上げる
これだけ。笑
次からは実際のコマンドと実行結果を貼り付けていく。
Nuxtプロジェクト導入
yarn create nuxt-app 【App名】でインストール
$ yarn create nuxt-app testApp※yarnコマンドを使用するためにはyarnのインストールが必要
yarn create v1.19.0
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
warning Your current version of Yarn is out of date. The latest version is "1.19.1", while you're on "1.19.0".
info To upgrade, run the following command:
$ brew upgrade yarn
success Installed "create-nuxt-app@2.11.1" with binaries:
- create-nuxt-app
[#####################################################################] 340/340
create-nuxt-app v2.11.1
✨ Generating Nuxt.js project in testAppいくつかの質問に回答する
実行結果に続けてアプリ作成に必要な質問をされるので一緒に回答する。
? Project name testApp
? Project description My brilliant Nuxt.js project
? Author name Shoji miyuki
? Choose the package manager Yarn
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
? Choose test framework None
? Choose rendering mode Single Page App
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)Warning: name can no longer contain capital letters
🎉 Successfully created project testApp
To get started:
cd testApp
yarn dev
To build & start for production:
cd testApp
yarn build
yarn start
✨ Done in 124.28s.立ち上げる
作成されたディレクトリに移動して下記のコマンドでローカルサーバを立ち上げる。
$ cd testApp
$ npm run dev> testApp@1.0.0 dev /Users/shojimiyuki/work/project/testApp
> nuxt
╭──────────────────────────────────────────╮
│ │
│ Nuxt.js v2.10.2 │
│ Running in development mode (spa) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰──────────────────────────────────────────╯
ℹ Preparing project for development 11:45:12
ℹ Initial build may take a while 11:45:12
✔ Builder initialized 11:45:12
✔ Nuxt files generated 11:45:12
✔ Client
Compiled successfully in 2.67s
ℹ Waiting for file changes 11:45:16
ℹ Memory usage: 189 MB (RSS: 266 MB) 11:45:16ここでhttp://localhost:3000にアクセスするとこんな画面に！
ローカルサーバを落としたい時はcontrol + CでキャンセルすればOK。
最後に
とても適当な駆け足で書いていったが、アプリを作成して立ち上げるのはとても簡単ということが分かる。
あとはディレクトリの構造や基本文法など、これから学習していくのでまた知識がついたら備忘録として残しておく。
0