Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@takasynapse

Vue.js+Vuetifyでロードバイクのブランド辞典を作る① ~Vuetify導入編~

はじめに

はじめまして。普段学生IT団体watnowに所属しており、Webアプリ開発をしている傍ら、大学のサイクリングサークルの部長を務めているものです。毎年この時期は新入生がサークルに入部してくるのですが、新入生の中には今までロードバイク、クロスバイクといったスポーツ用自転車の全く未経験という方もたくさんいらっしゃいます。
今回は、そんな彼らのロードバイク選びの参考になればという思いから、ロードバイクブランドの一覧サイトを作った所存でございます。タイトルには偉そうに「辞典」とつけておりますが、そんな大層なものではございません。
今回はVuetify導入編ということで、実際に記述したコードなどの紹介は「実装編」という形で次回記事を書きたいと思います。

完成図

今回作ったサイトは次のようなものです。
国別にリスト化して、ブランドごとに
1.ブランド名
2.フラグシップモデルの画像、モデル名、値段
3.ブランドの説明(EXPLOREを押すと説明が開かれます)
4.公式サイトへのリンク
を載せています。
bikebrands.png

Vuetifyとは

Vuetify公式ドキュメント
VuetifyはVue.jsのUIフレームワークです。マテリアルデザインというGoogleが提唱したデザインシステムに則っており、デザインの知識がなくても簡単にきれいなUIを作ることが出来ます。デザインセンスのかけらもなく、CSSをヒーヒー言いながら書いているわたくしのような人間にはとてもありがたいものです。

Vuetifyの導入

公式ドキュメント通り、VueCLIによるインストール方法で話を進めます。
Vue3はサポートされていないそうなのでご注意ください。

Vuetifyの現在のバージョンはVue 3をサポートしていません。 Vue3に対応する Vuetify v3 がリリース予定です。 新しいプロジェクトを作成する場合は、Vue CLI プロンプトから Vue2を選択したか、既存の Vue 2 プロジェクトにインストールすることを確認してください。

vue createで新たにプロジェクトを作成してから、Vuetifyを追加しましょう。

$ vue create bike-brands
新しいプロジェクトディレクトリに移動する
$ cd bike-brands
Vuetifyを追加
$ vue add vuetify

インストールが完了したらサーバを起動しましょう。

$ npm run serve

すると、普段見慣れているVue.jsの画面とは少し違った、なんだかおしゃれな感じ表示になっています。
スクリーンショット (209).png

どうしてこうなったのでしょうか?

Vuetifyは何が違うの?

作成したプロジェクトのApp.vueのtemplateを見てみます。

<template>
  <v-app>
    <v-app-bar
      app
      color="primary"
      dark
    >
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld/>
    </v-main>
  </v-app>
</template>

<v-○○>と書かれたタグがいっぱいありますね。
これがVuetifyの特徴で、Vuetifyでは<v-○○>というUIコンポーネントを組み合わせて見た目を作っていきます。各UIコンポーネントの説明は公式ドキュメントにあります。公式ドキュメント通りにコンポーネントを使うだけで、簡単におしゃれなUIを実装することが出来ます。百聞は一見に如かずということで、気になる方はサンプルを見てください。驚くほど多くの種類があり、どれを使うか考えるだけでワクワクしますね。

Vuetifyのサンプルを漁ってみる

公式ドキュメントのサンプルから良い感じのものを探したいと思います。
今回サイトに載せたい情報は、
1.ブランド名
2.フラグシップモデルの画像、モデル名、値段
3.ブランドの説明(EXPLOREを押すと説明が開かれます)
4.公式サイトへのリンク
です。
cardコンポーネントによさげなサンプルを見つけたので、今回はこの2つを組み合わせて1つのカードを作っていきたいと思います。

スクリーンショット (216).png

スクリーンショット (215).png

右上の<>を押せば、ソースを表示できるのでコピペで使うことが出来ます。

また、GitHubアイコンの左にあるアイコンを押すと、CodePenでサンプルを好きなようにいじることが出来ます。
スクリーンショット (223).png

今回はVuetify導入編ということで、実際に記述したコードはただいま執筆中の「Vue.js+Vuetifyでロードバイクブランド辞典を作る② ~実装編~」でご紹介したいと思います。
ここまで読んでいただきありがとうございました。

9
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
watnow
学生IT団体、watnowは 「Make Our Life Wonderful」の理念の元、学生自らの力で、より楽しい大学生活を作るため日々アプリ・webサービスの開発を行っている団体です。 Twitter :@watnows Instagram :@watnows

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?