学

【VueとNuxt】環境構築とcomponents, layoutsの使い方紹介

2020-01-15
2020-01-15
#Vue #JavaScript #Nuxt

今回は Vue と Nuxt についてです。React や JavaScript を調べているとよく目にするので調べてみました。

先に感想をいうと、非常に簡単で使いやすかったです。

パッとフロントを作りたいならとりあえず Nuxt を検討するのはありだと思います。

Vue と Nuxt は公式ドキュメントが日本語で丁寧に書いてあるので、わからないことは公式で調べられるのがいいです！

こちらの書籍も参考にさせていただきました。

※ 情報は 2019/1/18 のものです

環境構築

最低限必要なものは以下です。

Node.js のインストールが済めば npm というパッケージマネージャーが使えます。 npm コマンドで Vue CLI と cli-service-global をインストールします。

npm install -g @vue/cli @vue/cli-service-global

これで Vue を使うための最低限の準備は完了です。

Vue CLI がインストールされていれば、もうちょっと本格的に Vue を始められるプロジェクト作成のコマンドを使用できます。

vue create <project-name>

こちらを実行するとプロジェクトフォルダが作成され、なかに必要なものがたいがい揃っています。

Nuxt の場合は以下のコマンドで Nuxt を使うために基本的に必要なものが揃ったプロジェクトを作成できます。

npx create-nuxt-app <project-name>

こちらのコマンドでも vue create コマンド同様に必要なものがたいがい揃います

上記以外で個人的に入れておくとおすすめなのは以下になります。

  • Vue.js devtool
    • vue を chrome ブラウザでデバックするためのもの
    • Vue.js devtool
  • anyenv
    • pyenv や nodenv などの言語のバージョン管理を行う〇〇 env 系を管理するもの
    • anyenv の GitHub
  • nodenv
  • Visual Studio Code
  • yarn
    • npm と同じパッケージマネージャー。npm より早い
    • yarn 公式

これらは Mac であれば homebrew でだいたいそろいます。

Vue と Nuxt の違い

違いについてはNuxt JS 公式に書いてあります。

Nuxt は Vue に基づいたフレームワークです。.vueで記述でき、SSR やルーティングといったよく使う機能があらかじめそろえられています。Vue をより強力にしたものという認識でいいと思います。

Nuxt を使った web ページには有名なところだとnoteがあります。

Nuxt でページ作成

Nuxt で簡単な web ページを作ってみます。

まずは、適当なフォルダでnpx create-nuxt-app <project-name>を実行します。

コマンドを入力するといろいろ聞かれますがデフォルトのままで進みます。

インストールが終わったら、作ったプロジェクトフォルダに移動してyarn devを入力（パッケージマネージャーに npm を選択した人はnpmコマンドを使う）。

ブラウザでlocalhost:3000にアクセスすると以下のような画面が表示されます。

vue

これをカスタマイズしていきます。

表示されている内容はプロジェクトフォルダ内の pages 配下のindex.vueなので、こちらを開いて編集します。 とりあえずロゴやリンクを消してシンプルなページにしてみます。コードは以下の通りです。

<template>
  <div>
    <h1 class="title">テストページ</h1>
    <h2 class="subtitle">Nuxtお試し中</h2>
  </div>
</template>
<script>
  export default {}
</script>
<style>
  .title {
    font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
      'Helvetica Neue', Arial, sans-serif;
    display: block;
    font-weight: 300;
    font-size: 100px;
    color: #35495e;
    letter-spacing: 1px;
  }
  .subtitle {
    font-weight: 300;
    font-size: 42px;
    color: #526488;
    word-spacing: 5px;
    padding-bottom: 15px;
  }
</style>

そうするとブラウザはこんな感じになってると思います。

vue

ちなみにyarn dev実行中はホットリロードが行われていて、変更がリアルタイムに反映されます。

次はページを追加します。

ページを追加するにはプロジェクトフォルダ内の pages 配下に新しく拡張子.vueのファイルを追加します。名前はなんでもいいです。今回はnext.vueにしました。

next.vueにはindex.vueの内容をコピーして title 部分などを書き換えておきます。

次はindex.vueにもどって新しいページへのリンクを書きます。

<template>
  <div>
    <h1 class="title">テストページ</h1>
    <h2 class="subtitle">Nuxtお試し中</h2>
    <!-- 次ページへのリンク -->
    <nuxt-link to="/next">次ページへ</nuxt-link>
  </div>
</template>
<!--以下省略-->

<nuxt-link to="/next">次ページへ</nuxt-link>で to=の部分に拡張子なしのファイル名を記述するだけで次ページへのリンクになります。

次ページへリンクをクリックすると先ほど作成したページが以下のように表示されるはずです。

vue

components の使い方

次はコンポーネントを使ってみます。

まず、コンポーネントとはその名通り部品です。いろんなページで共通して使われるものはコンポーネントとして書いておくと何度も同じことを書かずにすむので便利です。

さっきのページにヘッダーをコンポーネントとして追加します。

プロジェクト内のcomponentsフォルダにHeader.vueを追加します。

内容はこんな感じで単純なものにしました。

<template>
  <div class="header">
    <h1>ヘッダー</h1>
  </div>
</template>
<script>
  export default {}
</script>
<style>
  .header {
    background-color: antiquewhite;
  }
</style>

次は、index.vueに Header コンポーネントを組み込みます。

<template>
  <div>
    <!-- ヘッダーコンポーネント -->
    <header />
    <h1 class="title">テストページ</h1>
    <h2 class="subtitle">Nuxtお試し中</h2>
    <nuxt-link to="/next">次ページへ</nuxt-link>
  </div>
</template>
<script>
  import Header from '../components/Header'
  export default {
    components: {
      Header,
    },
  }
</script>

ポイントは<script>タグ内にcomponents/Headerのインポートするのと、export default 内にあるように使用するコンポーネントを書くことです。

こうすると以下のようにヘッダーが追加されます。

vue

layouts の使い方

ヘッダーのようにどのページでも共通するものは、layouts/default.vueに記述することで全ページに適用されます。

今の状態だとnext.vueのページにはヘッダーは反映されていないと思うので、layouts/default.vueを使うことで全ページに適用されるか確かめていきます。

まずは前項でindex.vueに追加した Header コンポーネントを削除して、追加前の状態にします。

次はlayouts/default.vueに Header コンポーネントを追加します。コンポーネントの追加は上に記載したのと同じ方法です。

<template>
  <div>
    <Header />
    <nuxt />
  </div>
</template>
<script>
import Header from "../components/Header";
export default {
  components: {
    Header
  }
};
</script>
<!--以下のstyleは省略>

これで両方のページにヘッダーが追加されているはずです。

vue

ちゃんと反映されてますね！

まとめ

本記事では、Vue と Nuxt の始め方や components、layouts について紹介しました。

Vue と Nuxt はわかりやすくて楽しいです！

本当は v-on やら v-model についても書いていたのですが、記事が長くなりすぎたのでわけました笑

今回はページ遷移くらいしかやってないので、面白いのは次の記事です！

← 前ページへvue3とnuxt3をvue2初心者が触ってみた→ 次ページへ【VueとNuxt】v-on, v-if, v-bind, v-modelの使い方紹介

目次

  1. 環境構築
  2. Vue と Nuxt の違い
  3. Nuxt でページ作成
  4. components の使い方
  5. layouts の使い方
  6. まとめ