#2 ブログを作った話 - Nuxt.jsの開発環境構築

当ブログ(sumii.io)を、Figma, Nuxt.js, Contentful, Netlifyを使って構築した方法を各パートにわけて紹介していきます。

今回はNuxt.jsの開発環境の構築方法をご紹介します。

Nuxt.jsとは

Nuxt.jsはVue.jsアプリケーションを構築するためのフレームワークです。
日本語版の公式サイトもあるので、触ったことがない方はガイドに一通り目を通すことをおすすめします。

インストール

vue-cliをインストールしていない場合は、以下のコマンドでインストールしてください。

$ yarn add -g vue-cli

以下のコマンドを叩き、Nuxt.jsの開発環境をインストールします。

$ vue init nuxt-community/starter-template my-project

インストールが終わったら、my-project内に以下の構成がインストールされていると思います。

- /assets
- /components
- /layouts
- /middleware
- /node_modules
- /pages
- /plugins
- /static
- /store
- .editorconfig
- .eslintrc.js
- .gitignore
- nuxt.config.js
- package.json
- README.md
- yarn.lock

ローカル開発サーバーを起動

以下のコマンドを実行し、ローカル開発サーバーを立ち上げましょう。

$ yarn dev

立ち上がったら、localhost:3000にアクセスして、以下のように表示されたら開発環境構築は完了です。

スクリーンショット 2019-01-29 11.47.23

最後に

次回は#3で、Nuxt.jsでブログを実装します。