うとうとしながら。

学んだことのノート

Vue Router

f:id:utouto97:20210706233746p:plain

Vue Router

Vueでは、シングルページアプリケーション (SPA) をつくることができます。
SPAでは、ページは1枚だけです。
しかし、URLをもとに複数の画面を表示したいときもあります。
そんなときに、Vue Router を使ってルーティングを行います。

router.vuejs.org

Vue Router は、VueにおけるSPAで、ルーティングを制御するためのプラグインです。
Vue Routerを使うことで、SPAに複数ページを疑似的に実現することができます。

Vue Routerのインストールは、Vue CLI を使って簡単にできます。
一つは、vue createでプロジェクトを作成するときに、Vue Routerを選択し、追加することができます。
別の方法として、vue add vue-routerとすることでインストールすることができます。

Vue Routerでは、Routerクラスのインスタンスをつくり、Vue app本体に追加することで利用できます。

Routerクラスのインスタンス作成時には、routesを渡すのですが、その中でルーティングの設定を行います。

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

終わり

Vuetifyで提供されているクラス

f:id:utouto97:20210725220657j:plain

Vuetifyで提供されているクラス

Vuetifyでは、スタイリングのためのクラスもいくつか用意されています。

詳しくは、ドキュメントに書いてあります。
(Styles and animations)

vuetifyjs.com

スペーシング

Vuetifyでは、marginやpaddingを簡単に設定できるようなクラスが提供されています。

例えば、mx-autopt-3ma-2などがあります。
指定方法はあるルールにのっとっています。

まずは、1文字目には、m (margin) か p (padding) を指定します。
続いて、2文字目は、方向を指定します。
t (top), b (bottom), l (left), r (right), x (left + right), y (top + bottom), a (all) 等が指定できます。
そして、3文字目はハイフン (-) です。
続く4文字目は大きさを指定します。
数字で指定することができます。
また、auto も指定することができます。

カラー

Vuetifyでは、色を指定できるクラスも提供されています。

例えば、redbluepinkといったクラスがあり、それらを指定することで色を変えることができます。
また、lighten-数字,darken-数字,accent-数字などで微妙な色合いも指定できます。

その他

テキストのスタイル指定やBorder radiusの指定などもできます。
詳しくは、ドキュメントにあります。

終わり

Vuetifyを使ってみる② コンポーネント(ボタンとカード)

f:id:utouto97:20210725220657j:plain

前回、Vuetifyをインストールしたので、今回はコンポーネントをいくつか使ってみたいと思います。

utouto97.hatenablog.com

ドキュメントに詳しく書いてある

Vuetifyには、ボタンやリスト、表(table)など様々なコンポーネントがあります。
これらのコンポーネントの使い方は、ドキュメントに詳しく書かれています。

vuetifyjs.com

試してみる

ボタン (Button)

まずは、ボタンを試してみます。

シンプルなボタンは以下のように記述します。

<v-btn>シンプルなボタン</v-btn>

↓のようなボタンです。

f:id:utouto97:20210912003801p:plain

そのほかにもいろいろなボタンを試してみましょう。

<v-btn color="primary">color="primary"なボタン</v-btn>
<v-btn color="warning" fab><v-icon>mdi-account-circle</v-icon></v-btn>
<v-btn tile color="success" ><v-icon left>mdi-pencil</v-icon>Edit</v-btn>

f:id:utouto97:20210912004234p:plain

カード (Card)

次にカードを作ってみます。

<v-card width="350">
  <v-card-text>
    <div>abcdefghi</div>
    <p class="text-h4 text--primary">Title</p>
    <div class="text--primary">
      sample sample sample sample sample<br>
      sample sample sample sample sample<br>
    </div>
  </v-card-text>
  <v-card-action>
    <v-btn text color="teal accent-4">more</v-btn>
  </v-card-action>
</v-card>

以下のようなカードを表示できます。

f:id:utouto97:20210912005128p:plain

カードも様々なカスタマイズが可能です。
詳しくはドキュメントを見るとわかりやすいです。

終わり

Vuetifyを使ってみる

f:id:utouto97:20210704221944p:plain

Vuetifyを使ってみる

環境はVue 2

今回は、Vuetifyを導入していきます。

VuetifyはVueで使えるマテリアルデザインフレームワーク (UIフレームワーク) です。

github.com

公式のドキュメントも充実していて、導入は簡単に行えます。

vuetifyjs.com

VuetifyはVue 3には対応しておらず、Vue 2のみに対応しているようです。

f:id:utouto97:20210911021712p:plain

Vuetifyをインストールして使ってみる

Vue CLI で Vue 2をインストールし終わった状態から作業を始めることを想定しています。

Vuetifyのインストールは、Vue CLIで容易に行うことができます。

$ vue add vuetify

すると、presetの選択の質問をされます。
今回は、defaultを選びました。

あとは、自動でVuetifyがインストールされます。

サーバーを起動して、ブラウザから確認してみます。
以下のような画面が表示されます。

f:id:utouto97:20210911014118p:plain

終わり

Vueでスタイリング

f:id:utouto97:20210725220657j:plain

Vueでスタイルを設定

Vueでスタイルを設定するには、<style></style>を追加してその中に書いていくことができます。
また、テンプレート内のタグにクラスやIDを設定して、クラスやIDに対するスタイリングを<style></style>に書くこともできます。

<template>
  <div>
    <h1>Vue あかいろ</h1>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
h1 {
  color: red
}
</style>

<template></template>内でHTML要素を記述し、<style></style>内でスタイルを指定します。
上の例の場合だと、<h1>タグ内の文字色を赤にしています。

この場合、以下のようにレンダリングされます。

f:id:utouto97:20210910001710p:plain

また、BootstrapやTailwindなどのCSSフレームワークを利用することもできます。
BootstrapやTailwindなどのCSSフレームワークをインストールすれば、クラス名にbtn btn-primary等を指定すれば、そのスタイルが適用されます。

Vueで使えるUIフレームワーク

Vueでは、BootstrapやTailwindなどのCSSフレームワークを利用することができます。
しかし、それだけではなく、Vue用のUIフレームワークもいくつもあります。

いくつか例を示します。

  1. Vuetify
    GitHub - vuetifyjs/vuetify: 🐉 Material Component Framework for Vue
  2. Ionic
    GitHub - ionic-team/ionic-framework: A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
  3. Buefy
    GitHub - buefy/buefy: Lightweight UI components for Vue.js based on Bulma

それぞれ、レスポンシブ対応であったり、マテリアルデザインであったり、と様々な特徴があります。

今後、これらのUIフレームワークも利用していきたいと思っています。

終わり

DockerでVue

f:id:utouto97:20210725220659j:plain

Dockerとdocker-composeでVueプロジェクトを作成

Dockerとdocker-composeを使って、Vueプロジェクトを作成してみます。
Vueプロジェクトの作成は、Vue CLI を使うと簡単にできます。

まずは、Dockerfileとdocker-compose.ymlの二つのファイルを準備します。

Dockerfile

FROM node:alpine
WORKDIR /app
RUN npm i -g @vue/cli

中身は3行だけで、やっていることもシンプルです。

まず、ベースイメージとして、node:alpineイメージを指定しています。
Node.jsの軽量イメージです。

WORKDIRは、作業用ディレクトリの指定です。

最後に、RUN npm i -g @vue/cliで、Vue CLIをインストールしています。
これにより、Dockerコンテナ内で、Vue CLIを利用できるようになります。

docker-compose.yml

version: '3'
services:
  app:
    build: .
    command: npm run serve
    volumes:
      - .:/app
    ports:
      - '8080:8080'

docker-compose.ymlでやっていることもシンプルです。

commandで、実行するコマンドを指定します。
ここでは、NPMのコマンドを利用して、Vueを起動する、npm run serveを指定しています。

volumesで、ボリュームの設定をしています。
これにより、データを永続化することができます。
また、ホストマシンで編集したファイルがコンテナ内でそのまま利用できるため便利です。

あとは、ポートを指定する必要があります。
Vueでは、8080番ポートを利用するので、portsで指定します。

Dockerイメージをビルド

docker-composeのコマンドで、イメージをビルドします。

$ docker-compose build

Vue CLIを使ってプロジェクト作成

Vue CLIを使って、Vueプロジェクトを作成します。
ここで重要なのは、コンテナ内でVue CLIを実行することです。

$ docker-compose run app vue create /app

あとは、いくつか質問に答えて(設定すると)、Vueプロジェクトが作成されます。

コンテナを起動

$ docker-compose up -d

これで、コンテナを起動できました。
コンテナは起動されると、npm run serveを実行してVueを起動します。
ですから、ブラウザからhttp://localhost:8080にアクセスすると、Vueの画面が表示されます。

f:id:utouto97:20210830130214p:plain

終わり

v-for 使ってみる

f:id:utouto97:20210706233746p:plain

v-forを使ってみる

v-forを使って、リストを表示してみます。

まずはリストを準備します。

  data() {
    return {
      items: [
        { id: 1, name: "apple" },
        { id: 2, name: "orange" },
        { id: 3, name: "peach" },
        { id: 4, name: "grape" },
        { id: 5, name: "melon" },
      ]
    }
  }

v-forを使って、↑をリスト表示します。

  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>

v-for="item in itemsで、itemsの中身を一つずつitemとして取り出します。
一意に識別するために、:keyを設定しています。

これで、v-forでリスト表示できました。
↓の感じになります。

f:id:utouto97:20210907233917p:plain

終わり