整理と雑記

たまにリライト

Nuxt.jsでHello Worldしてページ遷移する

本記事では以下を行う。

  • Nuxt.jsのプロジェクト作成
  • プロジェクトを起動してブラウザの表示を確認
  • Hello Worldのページ作成
  • Top画面からHello Worldのページに遷移

環境

  • macOS High Sierra 10.13.4
  • node.js v10.3.0
  • npm 6.1.0

Nuxt.jsのプロジェクト作成・起動

vue-cliを使用するのでインストールする。

npm install -g vue-cli

プロジェクトを作成する。今回は「nuxt-example」の名前で作成。

vue init nuxt/starter nuxt-example

作成時に「Project name」「Project description」「Author」が聞かれるので任意で入力する。

? Project name nuxt-example
? Project description nuxt exaple
? Author sato

入力が終わるとプロジェクトが作成されて以下のメッセージが表示される。

   vue-cli · Generated "nuxt-example".

   To get started:
   
     cd nuxt-example
     npm install # Or yarn
     npm run dev

メッセージ通りに以下のコマンドを実行する。

cd nuxt-example
npm install
npm run dev

npm run devが終わると「OPEN http://localhost:3000」と表示されるのでブラウザでhttp://localhost:3000を開く。以下の画面が表示される。

f:id:satoec5:20180606081847p:plain

この画面のソースは./nuxt-example/pages/index.vueで確認できる。

Hello Worldする

次にHello Worldのページを作成する。./nuxt-example/pages配下にhelloのディレクトリとhelloworld.vueを作成する。

helloworld.vueの記載は以下。

<template>
  <h1>Hello {{ name }}!</h1>
</template>

<script>
export default {
  data: () => {
    return { name: 'world' }
  }
}
</script>

参考:GitHub - nuxt/nuxt.js: The Vue.js Developers Framework

http://localhost:3000/hello/helloworldを開くと以下の画面が表示される。pages配下のディレクトリ+ファイル名とURLが一致する。

f:id:satoec5:20180607073003p:plain

Top画面からHello Worldのページに遷移する

Top画面のボタンにHelloボタンを追加してHello Worldのページに遷移する。Top画面には既にNuxt.jsの公式ドキュメントとGitHubのページに遷移するボタンが配置しているのでコピペで作成する。

index.vueの該当箇所は以下。

      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
      </div>

この部分を以下のようにする。新しいタブで開きたくなかったのでtarget="_blank"の記載は削除している。リンク部分の記載はpages配下のディレクトリ+ファイル名を記載する。

      <div class="links">
        <a
          href="https://nuxtjs.org/"
          target="_blank"
          class="button--green">Documentation</a>
        <a
          href="https://github.com/nuxt/nuxt.js"
          target="_blank"
          class="button--grey">GitHub</a>
        <a
          href="/hello/helloworld"
          class="button--grey">Hello</a>
      </div>

http://localhost:3000を開くと以下の画面が表示される。Helloボタンを押すとHello Worldのページに遷移できる。

f:id:satoec5:20180607074519p:plain