【今日からはじめるNuxt.js】Nuxt.jsのはじめのいっぽ(プロジェクトの作成～簡単なページ遷移まで)
今回は、Nuxt.jsの基礎的な部分(プロジェクトの作成～「HelloWorld」を画面に表示する)について
書いていきたいと思います。
目次
１．Nuxt.jsとは
２．プロジェクトの作成～確認
３．「Hello World」を画面に表示する。
４．簡単なページ遷移を実装する。
５．おわりに
１．Nuxt.jsとは
モダンなwebアプリケーションを作成するVue.jsに基づいたプログレッシブフレームワーク。
Vue.jsはUIを構築するためのフレームワークであり、Ajaxやサーバーサイドレンダリングなどの機能は提供していませんが、
Nuxt.jsはVue.jsのUI機能と、Vue.jsが提供しないUI以外の機能をまとめて利用できる環境を提供し、Vue.jsを用いてアプリ開発を行うことができます。
２．プロジェクトの作成
早速プロジェクトを作成します。
前提
- Node.js(v8.9.0以上)
- NPM(v5.2.0以上)
がインストールされていることを前提とします。
プロジェクトのインストール
以下コマンドで、プロジェクトファイルを作成します。
$ npx create-nuxt-app helloworldnpxコマンドは、v5.2.0以上のNPMをインストールしていれば利用できます。
コマンド実行後、プロジェクト名はどうするかなど、対話形式で設定を行っていきます。
パッケージマネージャーをNPMにした部分以外は、デフォルトでいいでしょう。
create-nuxt-app v2.11.1
✨ Generating Nuxt.js project in nuxt-first-exercise
? Project name nuxt-first-exercise
? Project description My superb Nuxt.js project
? Author name skakehi
? Choose the package manager Npm
? Choose UI framework None
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Choose test framework None
? Choose rendering mode Universal (SSR)
? Choose development tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.プロジェクトの構造を見てみる
インストール後のプロジェクト構造を見てみます。
各ディレクトリやファイルの役割ですが
- assets・・・スタイルシシートや画像などを配置
- components・・・vuejsのコンポーネントファイルを配置
- layouts・・・ページの外観を変えるレイアウトファイルを配置
- middleware・・・レンダリングされる前に実行されるカスタム関数を配置する(ex.認証)
- pages・・・各ページごとで使うコンポーネントファイルを配置する
- plugin・・・jsライブラリを配置
- static・・・静的ファイルを配置する。
- store・・・状態を管理するvuexストアのファイルを格納
- nuxt.config.js・・・nuxt.jsのカスタム設定を行うファイル
- package-lock.json・・・依存するパッケージのバージョンを固定する。
- package.json・・・アプリケーションが依存するパッケージを記述。mavenのpom.xmlに相当
となっています。
プロジェクトの起動
プロジェクトを開発モードで起動します。
作成したプロジェクトのディレクトリに移動し、以下コマンドを実行します
$ npm run dev
> helloworld@1.0.0 dev C:\Users\kkp\Documents\nuxt-projects\helloworld
> nuxt
╭─────────────────────────────────────────────╮
│ │
│ Nuxt.js v2.10.1 │
│ Running in development mode (universal) │
│ │
│ Listening on: http://localhost:3000/ │
│ │
╰─────────────────────────────────────────────╯
i Preparing project for development 11:11:24
i Initial build may take a while 11:11:24
√ Builder initialized 11:11:24
√ Nuxt files generated 11:11:24
√ Client
Compiled successfully in 6.19s
√ Server
Compiled successfully in 5.34s
i Waiting for file changes 11:11:33
i Memory usage: 151 MB (RSS: 227 MB) 11:11:33開発モードで起動すると、ホットリロード(ソースコードを変更すると自動反映される)で起動します。
デフォルトページへアクセス
プロジェクト作成時にデフォルトでindex.vueも作成されているので、確認してみます。
http://localhost:3000 にアクセスします。
デフォルトで作成されていたページが表示されました。
３．「Hello World」を画面に表示する。
index.vueをいじって”Hello World”という文字列を表示してみましょう。
作成したプロジェクト＞pages＞index.vue
<template>
<div class="container">
<h1>{{message}}</h1>
</div>
</template>
<script>
export default {
data: function() {
return {
message: "Hello World!"
};
}
};
</script>Mustache構文(”{{}}“のところ)を用いています。Mustache構文についてはこちらの記事で。
文字列が表示できました。
４．簡単なページ遷移を実装する。
次に、トップページから別ページに遷移するSPAの最小構成を実装してみましょう。
前提知識としてNuxt.jsは、ファイルをpagesディレクトリに配置すればルーティングを勝手に行ってくれます。
例えば、pagesディレクトリにmypage.vueというファイルを配置した場合
http://localhost:3000/mypage でアクセスできるといった感じです。
それでは、以下2ファイルを作成してみましょう。
作成したプロジェクト＞pages＞index.vue
<template>
<div class="container">
<h1>Top Page</h1>
<br><hr>
<router-link to="/mypage">マイページ</router-link>
</div>
</template>作成したプロジェクト＞pages＞mypage.vue
<template>
<div class="container">
<h1>マイページ</h1>
<br />
<hr />
<router-link to="/">Top Page</router-link>
</div>
</template>動作を確認してみましょう。
トップページとマイページを遷移する仕組みが作成できました。
ページの遷移には「Vue Router」というパッケージが使われています。
５．おわりに
いかがだったでしょうか。
今回紹介した内容はNuxt.jsのほんの触りに過ぎないと思っています。
今後もNuxt.jsについて学習し、記事にしていきたいと思っているのでよろしくお願いいたします～