Nuxt.jsの環境構築 #nuxtjs

Next.js とか Nuxt.js とかって何よ

サーバーサイドレンダリングって何よ

qiita.com

いきなり不要論とか言われましても

qiita.com

クライアントサイドで実行するJSをサーバサイドでも実行できるようにするって言う感じなのかな。

サーバサイドレンダリングというかUniversal JavaScript?

Vue.js

jp.vuejs.org

ユーザーインターフェイスを構築するためのプログレッシブフレームワーク

らしい。プログレッシブが何なのかは分からない。

とりあえず「はじめに」をコピペしつつ動かしてみた。

書き味はそんなに悪くない印象。

リアクティブって言葉、定義が広すぎてよく分からない

IDEA、Ultimateならプラグイン使える

Vue.js - Help | IntelliJ IDEA

Nuxt.jsの環境構築

nodebrew

nodeのバージョン管理をできるnodebrewを入れる

$ brew install nodebrew
$ nodebrew help
nodebrew 0.9.8

nodebrewを無邪気に使おうとしたらディレクトリがないとか言って怒られた。

Warning: /Users/hogehoge/.nodebrew/src/v8.9.4/node-v8.9.4-darwin-x64.tar.gz:
Warning: No such file or directory

ディレクトリを作ったら大丈夫になった。

$ mkdir /Users/hogehoge/.nodebrew/src

Node.js

nodebrewで最新の安定版をインストールする。

$ nodebrew install-binary stable
$ nodebrew ls
v8.9.4
$ nodebrew use v8.9.4
$ node -v
v8.9.4

Vue.js

$ npm install vue

CLIも導入する

$ npm install --global vue-cli
$ vue --version
2.9.2

Nuxt.js

サンプルプロジェクトを作る

$ vue init nuxt-community/starter-template hello-nuxt

依存するパッケージのインストール

$ cd hello-nuxt/
$ npm install

起動

$ npm run dev

http://localhost:3000 で起動します。

参考

qiita.com qiita.com