Nuxt.jsの開発環境構築

macに、Nuxt.js開発構築を行う方法をメモします。

Nuxt.jsとは

Nuxt.js はユニバーサルな Vue.js アプリケーションを構築するためのフレームワーク。Vue, Vue-Router, Vuexに加えて、Babelやwebpackなどが同梱されています。

Nuxt.jsの大きな特徴の１つに「サーバーサイドレンダリング(SSR)」を手軽に行えるという点があります。これによりVue.jsで*.vueの開発を行いながらもSEOフレンドリーなサイト制作が可能となります。また、Sassなどのプリプロセッサを標準サポートしたり、ES5 / ES6トランスパイレーションといった機能を搭載しています。

Nuxt.jsの開発環境構築

MacにおけるNuxt.jsの開発環境構築には複数のやり方があるようですが、今回は比較的シンプルな「Create Nuxt App」を利用した手順で行いました。

コマンドプロンプトからプロジェクトフォルダの1つ上へ移動して以下のコマンドを実行します。

npx create-nuxt-app <my-project>

プロジェクト名、説明、ライブラリ導入有無などいくつか質問に答えていきます。今回、私の方はプロジェクト名にブログ名となる「irodoridays」、パッケージマネージャにはnpmより高速のyarnを選択しました。

構築が終わると次の手順が表示されます。

To get started:
   cd irodoridays
   npm run dev

To build & start for production:
   cd irodoridays
   npm run build
   npm start

プロジェクトフォルダへ遷移した後

yarn

と実行すると、必要なインストール作業が行われます。
続けて、

yarn run dev

としてdevモードで起動すると、ローカル環境に3000ポートで起動します。
ブラウザからlocalhost:3000で確認すると以下のような画面が表示されます。これで開発環境が構築できました。

nuxt.jsのディレクトリ構造

ディレクトリ構造は公式ドキュメントを参照。https://ja.nuxtjs.org/guide/directory-structure
紛らわしい点として、assetsとstaticがあるが、assetsはSASSなどでコンパイルする前のコードを入れるディレクトリ。webpackで取り扱うもの。

最後に

「Create Nuxt App」を使えば、開発環境の構築は数分で完了します。今後、まちいろでは静的なサイト制作にもNuxt.jsを採用する予定です。ノウハウを蓄積して公開していければと思っています。