Nuxt.jsを触ってみた
今日は前から気になっていた、Nuxt.jsを触ってみました！！
Nuxt.jsとは
vue.jsでアプリを作るためのフレームワークです。
手順
①npm install -g vue-cli
vueのコマンドラインツールをインストールします。
~ $ npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
/Users/hayashiyoshino/.nodebrew/node/v11.0.0/bin/vue -> /Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/vue-cli/bin/vue
/Users/hayashiyoshino/.nodebrew/node/v11.0.0/bin/vue-init -> /Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/vue-cli/bin/vue-init
/Users/hayashiyoshino/.nodebrew/node/v11.0.0/bin/vue-list -> /Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/vue-cli/bin/vue-list
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 12.975s
②vue init nuxt-community/starter-template nuxt_sample
nuxt_sampleというアプリ名でサンプルアプリを生成します。
~ $ vue init nuxt-community/starter-template nuxt_sample
? Project name nuxt_sample
? Project description Nuxt.js project
? Author 林佳志乃 <twinklestaryoshino@gmail.com>
vue-cli · Generated "nuxt_sample".
To get started:
cd nuxt_sample
npm install # Or yarn
npm run dev
③yarn
ディレクトリを移動し、yarnコマンドを実行します。
しかし自分はyarnコマンドが使えないと言われてしまったので、yarnのインストールからすることにしました。
~ $ cd nuxt_sample
~/nuxt_sample $ yarn
fish: Unknown command 'yarn'
npm install -g yarnというコマンドでyarnをグローバルにインストールし、パスも通るようにします。
~/nuxt_sample [127] $ npm install -g yarn
/Users/hayashiyoshino/.nodebrew/node/v11.0.0/bin/yarn -> /Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/yarn/bin/yarn.js
/Users/hayashiyoshino/.nodebrew/node/v11.0.0/bin/yarnpkg -> /Users/hayashiyoshino/.nodebrew/node/v11.0.0/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.15.2
added 1 package in 12.275s
╭───────────────────────────────────────────────────────────────╮
│ │
│ New minor version of npm available! 6.4.1 → 6.9.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v6.9.0 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯
無事インストールされたので、yarnコマンドを実行します。
~/nuxt_sample $ yarn
yarn install v1.15.2
info No lockfile found.
[1/4] 🔍 Resolving packages...
warning eslint > file-entry-cache > flat-cache > circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > eslint-loader@2.1.2" has unmet peer dependency "webpack@>=2.0.0 <5.0.0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
✨ Done in 90.73s.
④yarn dev
yarn devコマンドでnuxtアプリを立ち上げます。
~/nuxt_sample $ yarn dev
yarn run v1.15.2
$ nuxt
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.6.3 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────────────────────────────╯
ℹ Preparing project for development 14:45:47
ℹ Initial build may take a while 14:45:47
✔ Builder initialized 14:45:47
✔ Nuxt files generated 14:45:47
✔ Client
Compiled successfully in 7.78s
✔ Server
Compiled successfully in 6.99s
ℹ Waiting for file changes 14:45:58
ℹ Memory usage: 140 MB (RSS: 160 MB) 14:45:58
^C⏎
これで、localhost:3000にアクセスすると、アプリが見れる状態になります！
この後、TODOアプリなり、チャットアプリなりを作ってデプロイまでしていこうと思います！
