Help us understand the problem. What is going on with this article?

Vuetifyの基本的な使い方とよく使いそうなところのドキュメントのメモ

Vuetifyとは

公式ページ

Vue.jsのマテリアルデザイン用のフレームワークです。React.jsのMATERIAL-UIのVueバージョンと言ったところです。

Vuetifyを使用する最大のメリットはCSSを書かなくても、整ったUIを作成することができるということです。

Vuetifyの導入

VueCLIはインストール済を想定してます。

//プロジェクトの作成
$ vue create my-app //「my-app」は何でもいいここの名前でプロジェクトが作成される
//vuetifyの追加
$ vue add vuetify

Nuxt.jsなどで導入するときはこちらを参考

サンプル

画面

スクリーンショット 2020-04-05 14.55.04.png

コード

Home.vue
<template>
  <div class="home">
    <h1>HomePage</h1>
    //v-btnでボタンが作れる
    //classにpinkをあてることでピンク色に、white--textをあてることでテキストが白に
    <v-btn class="pink white--text">click me</v-btn>
    //textをつけるで背景色と影がなくなる colorで色を指定
    <v-btn text color="pink">click me</v-btn>
    // depressedをつけることで影がなくなる
    <v-btn depressed class="pink white--text">
      //v-iconでアイコンをつける mdi-emailでemaiのアイコン
      <v-icon left>mdi-email</v-icon>
      <span>EMAIL ME</span>
    </v-btn>
    //fabをつけることで丸くできる
    <v-btn fab depressed small dark color="purple">
      //v-iconでアイコンをつける mdi-heartでハートのアイコン
      <v-icon>mdi-heart</v-icon>
    </v-btn>
  </div>
</template>

<script>

export default {
}
</script>

勉強方法

チュートリアルをやるのが手っ取り早いです。

英語ですが、画面に映っている通りにやっていけば大体のことは理解できます。
また、画面通りにやって上手くいかない時には、コメントを見れば、解決できることが多いです。

よく使うそうな部分のドキュメントメモ

下記は私がよく使いそうだと感じる部分のドキュメントのリンクのメモです。
大体は下記のドキュメント、サンプルコードを読むことで大体理解できるかなぁと思います。
Codepenへのリンクにとんで実際にコードをイジってみるのも面白いです。


https://vuetifyjs.com/ja/styles/colors/#colors

文字サイズ
https://vuetifyjs.com/ja/styles/typography/#font-sizes

ボタンとicon
https://vuetifyjs.com/ja/components/buttons/#buttons

フォーム
https://vuetifyjs.com/ja/components/forms/#forms

ファイルを使うフォーム
https://vuetifyjs.com/ja/components/file-inputs/#file-inputs

使い勝手良さげ

自分の手でCSSを書かなくていい分、慣れれば工数を削減できる可能性高いなと思います。
かなり凝った表現が必要、とかでない限りはこういったフレームワークを使うのはアリなんじゃないかなぁと思います。

hideokaizuka
営業職、ライターを経てエンジニアにキャリアチェンジしたエンジニア。(3年目)HTML/CSS/JavaScript/jQuery/Vue.js/Nuxt.js/PHP/Ruby/Ruby on Rails/React.js/Gatsby.js
https://hideokaizuka.com/
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