去年の年末に知ってたNuxt.jsを使ってみたいと思ったので、チュートリアルも兼ねて試しに検証をしてみました。
公式のドキュメントもしっかりしていて、ありがたいですね。
Nuxt.jsとは?
Nuxt.jsは、Vue.jsのアプリケーションのフレームワークになります。
Nuxt.js とはユニバーサルな Vue.js アプリケーションを構築するためのフレームワークです。
クライアントサイド用のディストリビューションと、サーバーサイド用のディストリビューションとを分離して生成している間に行う UI レンダリング に焦点を当てています。
Vue.jsを本格的に使っていくには、Webpack・Babelの設定などを自前で用意しなければなりませんが、
Nuxt.jsにはスターターキットというテンプレートが用意されているので、手軽にインストール始めることができます。
- Vue ファイルで記述できること
- コードを自動的に分割すること
- サーバーサイドレンダリング
- 非同期データをハンドリングするパワフルなルーティング
- 静的ファイルの配信
- ES6/ES7 のトランスパイレーション
- JS と CSS のバンドル及びミニファイ
- Head 要素の管理
- 開発モードにおけるホットリローディング
- SASS, LESS, Stylus などのプリプロセッサのサポート
手軽に始めれるということだったので、試しにインストールしてルーティングしてみました。
インストール
今回は、Vue-cliを使って、スターターキットをインストールしてみます。
もちろん公式にはスクラッチから始めることも記載されています。
vue-chilをインストール
npm or yarnでグローバルにvue-cliをインストールします。
bash
npm install -g vue-cli
nuxt/starter をインストール
vueコマンドが使えるようになったら、スターターキットをインストールします。
bash
vue init nuxt/starter <project-name>
cd <project-name>
npm install
プロジェクトを起動してみる
npm run devでローカルサーバが立ち上がります。(http://localhost:3000)
bash
npm run dev
起動を確認
以下がコマンドを一覧になります。
bash
# nuxt コマンドを実行
npm run dev
# nuxt build コマンドを実行
npm run build
# nuxt start コマンドを実行
npm run start
# nuxt generate コマンドを実行
npm run generate
テンプレートを触ってみる
pages内にある.vueファイルがアプリケーションのルーターを作成します。
触ってみて
SSRにも対応しているということで、かなり使いやすい印象でした。
もう少し、触ってみて詳細を追記していきたいと思います。