Nuxt.js 入門 #1 – Nuxt.js の環境構築

Nuxt.js を利用したアプリケーション開発の手法を紹介していきます。第一回目はNuxt.jsを用いた環境構築の手法を紹介します。

Nuxt.js は Vue.js を利用してWebアプリケーションを作成するための、フレームワークです。

Vue.js による開発で頻繁に利用される VueRouter や Vuex との強固な連携で、複雑なWebアプリケーションを快適に構築する事が可能になっています。

Nuxt.js の環境構築

Nuxt.js によるウェブアプリケーション開発を始めるには以下のコマンドを実行します。

$ vue init nuxt-community/starter-template my-vue-app
$ cd my-vue-app
$ npm i

コマンドを実行するといくつか質問が表示されます。 Enter キーを押して回答をスキップするか、任意の値を入力するとプロジェクトテンプレートのダウンロードが始まり次のようなファイル構成が出来上がります。

.
├── assets
├── components
├── layouts
├── middleware
├── node_modules
├── pages
├── plugins
├── static
├── store
├── README.md
├── nuxt.config.js
├── package-lock.json
└── package.json

ファイルが用意されていることを確認したら以下のコマンドでサーバを立ち上げましょう。

$ npm run dev

ブラウザで http://localhost:3000 を開くと、 Nuxt.js の初期画面が確認できます。

ページを作成する

Nuxt.js の初期画面は pages/index.vue のファイルで作成されています。

Nuxt.js では、すべてのページが .vue 拡張子の vue コンポーネントで作成されます。

新しいページを追加するために、pages/about.vue を作成してみましょう。

<template>
  <div>
    <h1 class="title">
      About
    </h1>
  </div>
</template>


export default {
}

作成したページは http://localhost:3000/about で確認できます。

Nuxt.js では pages ディレクトリに作成したファイル名がそのままURLとして使用されます。

例えば URL http://localhost:3000/profile というURLでページを作成したい場合、pages/profile.vue または pages/profile/index.vue という名前でvueコンポーネントを作成すればOKです。

動的な URL を処理する

複数のURL形式に対して同じページコンポーネントを表示させたい場合、動的なURLを設定することができます。

pages/posts/_slug.vue というページコンポーネントを作成してみましょう。

ファイル名の先頭に_ を付与して作られた このページコンポーネントは、 http://localhost:3000/posts/xxxxxxhttp://localhost:3000/posts/yyyyyy といった 複数の形式の URLで表示させることが可能です。

<template>
  <div>
    <h1 class="title">
      POST TITLE
    </h1>
     page slug: {{$router.params.slug}}
  </div>
</template>


export default {
}

実際にアクセスされたURL内で使用されているルートパラメータは、 {{$router.params.slug}}のようにして、$router オブジェクトから取得することが出来ます。

しかしこのルートパラメータは、URLに記載されたあらゆる文字列とマッチしてしまいます。
例えば投稿のスラッグは 6文字 である、といった風にルートパラメータのバリデーションを行いたい場合、コンポーネント内でそれを定義することができます。

export default {
  validate ({ params }) {
    // 投稿のスラッグは 英字 6文字
    return /^[a-z]{6}$/.test(params.slug)
  }
}

_ を先頭に付けたページコンポーネントが動的なパラメータと解釈されるのに対して、 - を先頭に付けたページコンポーネントは、 ルートとして認識されなくなります。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中