ホーム
Sponserd by↑転職したい人向け、ベンチャー企業の採用動画があります

Vue.jsで個人アプリ作るならVuetify(UIコンポーネントライブラリ)を使おう。

おはこんばんにちは。まっつんです。

本日は、Vue.jsで使えるUIコンポーネントライブラリであるVuetifyをご紹介します。

Vue.jsを勉強し始めて、何か作ってみたくなってきた場合、マジで役に立ちます。

最初に

僕はHTML・CSSから勉強を開始しているわけですが、HTML・CSSのUIコンポーネントライブラリはあんまり感動しなかったです。

なにぶん、公式サイトが見づらいと感じていたからです。

(今の方がプログラミングに慣れたというのもあると思いますが)

それに比べてVuetifyの公式サイトはめちゃめちゃ見やすい。

https://vuetifyjs.com/ja/

実装したいものを選んでコピペするだけ

例えば、スライドを実装したいとします。

公式のドキュメントのUIコンポーネントの中からCarouselsを選びます。

すると・・・

image

はい。ありました。

HTMLとCSSだけで実装すると、初心者は絶対に不可能な奴ですし、今でも僕は何も見ずに作ることはできません。

jQueryのslickも練度が無いと中々思ったスタイルにならなかったり、導入時に混乱すると思います。最初は。

このVuetifyだと、コピペで済みます。

何個かあるスライドの中から自分が使いたいやつを選んで、右上のコードを見るマークを押すと・・・

image image

このコードをコピーして貼り付けるだけでスライドが実装できます。

このスライドは、写真などの画像をスライドさせる前提で作られているものですね。

scriptの方は、ただ単に画像の代わりに背景の色を入力するためだけにあるものなので、

実質templateの方だけでスライダーが作成できてしまいます笑

すごすぎる。

template内を自分でアレンジすれば、写真と文字を表示だとか臨機応変に作成することができます。

つまり、大枠はコピペで作成した上で自分のアレンジができる

めちゃめちゃ使いやすい

ということです。

例えば、どんなものを爆速で実装できるのか

①まず感動したのは、ダイアログ

image

ボタンをクリックしたらダイアログが表示される。

もちろんコピペで一瞬で作れる。

② ナビゲーション(サイドバー)

image

Vueはfalseとtrueをtoggleさせれば簡単に開閉できるので、めちゃめちゃ便利です。

③メニューバー

image

オシャレ。youtubeで使われてるメニューバーも爆速で実装できます。

④ボタンやアイコン

image

超便利。

導入もめちゃめちゃ簡単

僕もプログラミングを初めて半年程度なのですが、やはりこういったものを導入する際に注意すべき点は、

記事を鵜呑みにして導入をしないこと

だと思います。

バージョンも変わってますからね。

僕は、公式サイトのQuick Startというのをとりあえず読んでから実装するように心がけています。

分からなければ記事を漁るといった感じです。

僕はnpmパッケージでVueCLIに導入したので、

コンソールで

$ vue add vuetify

main.jsに

import vuetify from './plugins/vuetify'

new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')

index.htmlに

<head>

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">

</head>

を入れただけでした。

簡単便利。楽しい。

V-iconっていう便利アイテムが使えない人は、以前書いた記事がこちらにあるので、読んでみてください。

https://poppotennis.com/posts/vuetify_v-icon/

##最初は難しいけど慣れるとVueがさらに楽しくなる

Vue.jsは本当に楽しい。

それくらいVueは書いていて楽しいです。

それに合わせてUIコンポーネントも使いこなせるようになれば、色々なものが自分で作れるようになります。

UIコンポーネントは必須のスキルでは無いですが、僕はこのVuetifyをはじめとするUIコンポーネントを何か一つ使えるようにしておくと、楽しいかなって思っています。

ぜひ、チャレンジしてみてください!