Nuxt.jsを始めてみよう！

以前、JavaScriptフレームワークのVueのプロジェクトの流れを記事にしまいした。

ただVueには全体のデータ管理やルーティングの仕組みないのですが、そういった機能がもともとあり、あとは作るだけ！！となったほうが便利ですよね？

それが「Nuxt.js」というVueをベースとした各種ライブラリを食い込んであるプログラムです。今回はその流れを記事にしていこうと思います。
自分もすぐに忘れるので防備ログとしてもいいかなと思っています。

Nuxt.jsのプロジェクトを作ってみる

さっそくNuxt.jsのプロジェクトを作っていきますが、コマンドプロンプトを起動して、「cd」でプロジェクトを作成するフォルダまで移動してください。そして以下のコマンドを入力するとプロジェクトが作成されます。

$ npx create-nuxt-app <project-name>

上記のコマンドをインストールするといろいろ、質問のような事が聞かれますが、サーバーフレームワークをどれを使うか？UIフレームワークはどれを使うか？など聞かれます。例えばUIフレームワークでbootstrapを使いたければ、bootstrapまで十字キーで移動してスペースキーで選択できます。

最後まで進めば勝手にインストールされます。

プロジェクトを起動してみる

インストールがされたあとは<project-name>で付けた名前のフォルダが出来てるので、cdでそのフォルダまで移動して以下のコマンドで起動してみましょう。

$ cd <project-name>　//作成してプロジェクトのフォルダに移動
$ npm run dev  //プロジェクトを起動

「npm run dev」でプロジェクトを起動すると以下ののような画面で「http://localhost:3000」と表示される

ブラウザで確認して以下の画面が表示されれば成功です。

あとはガリガリに作っていくだけです。

手動でNuxt.jsを使ってみよう！

先ほどはコマンドcreate-nuxt-appでプロジェクト一式を作成しましたが、手動でもNuxt.jsを使うことができます。個人的にはあまりこちらのやり方はすることは無いのかなぁと思いつつも。

package.jsonを手動で作る

該当するフォルダに以下のpackage.jsonを作る。

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

npmでNuxt.jsをインストールする

パッケージ管理ツールのnpmでを以下のコマンドを入力してNuxt.jsをインストールする

$ npm install --save nuxt

pagesフォルダを作ってVueファイルを作る

インストールした後は実作業に入るのですが、同じ階層にpagesフォルダを作成してみましょう。pagesフォルダはvueで各ページ用のファイルをまとめるフォルダです。あこは、pagesフォルダにVueファイルを作成してみましょう。

<template>
    <div>
        <p>これはindex.vue</p>
    </div>
</template>

上記のように、index.vueと名前を付けて保存してみます。そして以下のコマンドでプロジェクトを起動すれば、index.vueのファイルの内容が表示されるはずです。

npm run dev