EeBlog(テクニカルブログ)

新人プログラマーのアプリ開発 第3回 画面作成とルーティング

前回作成したプロジェクトを使って簡単なメモアプリをつくっていきます！

この記事で分かること
・開発サーバの立ち上げ方
・画面作成
・ルーティング

開発環境は次のとおりです。
・OS　Windows 7
・ブラウザ　Chrome
・エディタ　Visual Studio Code

開発サーバの立ち上げ方

まずは開発サーバを立ち上げます。
コマンドプロンプトからプロジェクトディレクトリに移動し、コマンドを実行します。

npm run dev


これでサーバが立ち上がりました。（かんたん！）
ブラウザから localhost:3000 にアクセスすると、初期画面が表示されます。


画面作成

早速、画面をつくっていきます。
画面は、page ディレクトリ内に Vue ファイルとして作成します。

page ディレクトリにはデフォルトで index.vue（先ほど表示されたのはこれ）があるので、これを編集していきます。

<template>
  <main>
    <header>
      <div>
        <h1>メモアプリ</h1>
      </div>
    </header>
    <div>
      <section>
        <p>
          <strong>Nuxt.jsでつくるメモアプリです！</strong><br/>
          Nuxt.jsとVue.jsの特徴をちょっとだけ体験できます。
        </p>
      </section>
      <section>
        メモを使う
      </section>
    </div>
  </main>
</template>

<script>
export default {
  
}
</script>

<style scoped>
/* 省略 */
</style>


Vue ファイルは以下の構成になっています。
・template　表示部分。ここに html を記述する
・script　データやロジックを記述する
・style　css を記述する

※ style に scoped を指定すると、css の影響範囲をファイル内に限定できる

ルーティング

page ディレクトリにファイルを作成すると、ファイル名から自動でパスが設定されます。
ルーティングの設定には、 Vue Router という仕組みが使われていますが、最初は特に意識する必要はありません。

試しに、memo.vue を作成してみます。

<template>
  <h3>ここでメモの入力と閲覧を行います</h3>
</template>

<script>
export default {

}
</script>


/memo にアクセスしてみます。


表示されました！

パスの設定は次のようになります。
・page/index.vue　→　/
・page/memo.vue　→　/memo
・page/sub/index.vue　→　/sub
・page/sub/content.vue　→　/sub/content

ファイル名やフォルダ名の先頭に「_」をつけることで、動的ルーティングを行うこともできます
（※ SPAモードでは不可）。

最後に、index.vue から memo.vue へ遷移できるようにします。
index.vue の「メモを使う」の箇所を、<nuxt-link> で囲い、to プロパティにパスを指定します。 

<nuxt-link to="/memo">メモを使う</nuxt-link>


これで画面遷移ができるようになりました！（つづく）

2019年4月12日 | カテゴリー：アプリ開発

│トップ│