Github + Nuxt.js で簡単にプロジェクトをはじめる方法

Nuxt.jsプロジェクトの作成の方法についてです。一つテンプレートとして持っておけば、クローンして $ npm i するだけでいつでもすぐにアプリ開発ができるから便利かも。

0. Githubリポジトリの用意

まず、Githubで適当な名前で空リポジトリを用意し、クローンします。（私はGUIじゃないとむりむりエンジニアなのでSourcetreeを使ってます）

ではでは早速、Nuxt.jsアプリケーションを作っていきます。

1. package.jsonの用意

{
 "name": "my-app",
 "scripts": {
   "dev": "nuxt"
 }
}

package.jsonファイルを作成し、上記jsonをコピー&ペーストします。

2. nuxtのインストール

$ npm install --save nuxt

上記コマンドで、npmでnuxtをプロジェクトに追加します。

3. 最初のページ pages/index.vue の作成

下記コマンドでpagesディレクトリを作って、

$ mkdir pages

index.vueを作成して、

<template>
 <h1>Hello world!</h1>
</template>

下記コマンドでプロジェクトを立ち上げると、

$ npm run dev

http://localhost:3000/ でアプリケーションは立ち上がってます（＾＾）簡単すぎる。おわりです。

おまけ

node_modulesが大量発生してます。（いっぱいパッケージ使ってるからね。）いちいちコミットすると重すぎるので、.gitignoreしちゃいましょう。

.gitignoreファイルの作成

.gitignoreファイルを作成したのち以下を記述し、node_modulesディレクトリをGitの監視外にします。

# depencies
node_modules/

おわり。

参考：Nuxt.js公式ドキュメント