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

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

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

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

vuetifyjs.com

スペーシング

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

例えば、mx-autoやpt-3やma-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では、色を指定できるクラスも提供されています。

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

その他

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

終わり

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

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

utouto97.hatenablog.com

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

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

vuetifyjs.com

試してみる

ボタン (Button)

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

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

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

↓のようなボタンです。

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

<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>

カード (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>

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

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

終わり

Vuetifyを使ってみる

Vuetifyを使ってみる

環境はVue 2

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

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

github.com

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

vuetifyjs.com

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

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

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

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

$ vue add vuetify

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

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

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

終わり

Vueでスタイリング

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>タグ内の文字色を赤にしています。

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

また、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

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の画面が表示されます。

終わり

v-for 使ってみる

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でリスト表示できました。
↓の感じになります。

終わり

v-for

v-for

Vueでは、v-forを使うことで、配列の要素を一つずつ処理することができます。
例えば、v-forを使うことで、配列の要素をリスト表示するための<li>タグを繰り返し生成することができます。

v-forでは、value in list のようにすることで、listの要素を一つずつvalueにバインドして利用できます。
いくつかのプログラミング言語にあるforeachのようなイメージです。

実際には↓のように記述します。

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

<li>タグをitemsの要素分作成するコードとなっています。

また、(value, index) in listのようにすることで、インデックスも取得することができます。

v-forをオブジェクトに使う

Vueでは、v-forでオブジェクトのプロパティを一つずつ取得することもできます。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

この場合でも、'(value, key) in object`とすることで、プロパティ名(キー)を取得することもできます。

参考

jp.vuejs.org

終わり