FrontEnd

【入門】Vuetifyで手軽に綺麗なWebページを作る

投稿日:2019年12月26日 更新日:

はじめに

フロントエンドの開発を行う場合、 Bootstrap や Materialize などのライブラリを利用することがよくあるのではないかと思います。

今回の記事では、 Vue.js を使った開発でマテリアルデザインを容易に適用できる、 Vuetify というフレームワークの導入から基本的な使い方までを紹介します。

Vuetifyとは

Vuetify は マテリアルデザインが適用された様々な Vue.js のコンポーネントが含まれたフレームワークです。 Vuetify を使用することで、自分でCSSを定義しなくても美しいデザインのWebページを作ることができます。

Vuetifyを導入する

Vuetify の導入には様々なやり方がありますが、今回は Vue Cli 3 以降で作成したプロジェクトに Vuetify を導入する方法を紹介します。それ以外の導入方法については、こちらをご覧ください。

パッケージを追加する

はじめに Vuetify Vue Cli 3 package をプロジェクトに追加します。

すると、 いくつかのパッケージがインストールされ、ファイルの追加、および編集が行われます。

TypeScriptを採用している場合

TypeScript で書いている場合、そのままだとビルドエラーになると思います。そのため、 tsconfig.json の types に vuetify を追加します。

Vuetifyのコンポーネント

Vuetify では様々なコンポーネントが用意されていますが、ここでは一般的に使われるであろうコンポーネントをいくつかピックアップして紹介します。

前提として、 Vuetify のコンポーネントは v-app の中に含める必要があります。

Application

Webページの骨格となるコンポーネント群です。ここには以下のコンポーネントが含まれます。

  • v-system-bar
  • v-app-bar
  • v-navigation-drawer
  • v-content
  • v-footer
  • v-bottom-navigation

これらが画面のどこに表示されるかはこちらをご覧ください。

また、vue-router を導入している場合、 v-content の中に router-view を配置するのが良いようです。

SPA の場合、以下のような構造になると思います。

v-navigation-drawer などの領域のサイズに応じて v-content の領域のサイズを動的に変更したい場合、 v-navigation-drawer などに app を指定し、 v-content の外側に配置する必要があります。

また、こちらに様々なレイアウトのサンプルが用意されています。

Grids

Bootstrap のグリッドシステムを想像してもらうとわかりやすいと思います。 v-row の中に v-col を追加していって、画面を構成します。

v-row のプロパティである align で縦軸の位置を調整し、 justify で横軸の位置を調整します。これらの設定による見た目を確認したい場合は、こちらをご覧ください。

v-col は v-row の中に含まれる v-col の数に応じて自動的に幅が変わりますが、プロパティである cols の値を指定することで幅を固定することができます。さらに、 v-col 同士の間に v-spacer を追加することで、間をいい感じに開けることもできます。

Buttons

ボタンのコンポーネントとして v-btn があります。 v-btn は指定するプロパティによって、様々な見た目のボタンを表示することができます。例えば以下のようなプロパティがあります。

  • color: ボタンの背景色を指定します
  • outlined: 輪郭のみのボタンにします
  • rounded: 丸みを帯びたボタンにします
  • text: 文字のみのボタンにします
  • fab: Floating Action Button にします
  • icon: アイコン画像のみのボタンにします

また、 to プロパティを指定することで、画面遷移するボタンにすることができます。

Dialogs

ダイアログのコンポーネントとして v-dialog があります。

また、 persistent を指定した場合、ダイアログの外側に触れてもダイアログが非表示にならなくなります。

他にも、ダイアログの中身をスクロール可能にする scrollable や、全画面で表示する fullscreen など、 v-dialog には様々なプロパティがあります。

さいごに

今回紹介したのは Vuetify で用意されているコンポーネントのうちの一部です。他にも様々な使いやすいコンポーネントが用意されていますので。ぜひ一度ドキュメントを見ていただければと思います。

おすすめ書籍

Vue.js入門 基礎から実践アプリケーション開発まで 動かして学ぶ!Vue.js開発入門 (NEXT ONE) これからはじめるVue.js実践入門

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

laravel logo

Inertia使ってみた①

1 はじめに2 Inertiaとは3 ルーティング4 LaravelからReactに値渡し5 レスポンス5.1 初回5.2 page object5.3 2回目以降5.4 リロード時6 さいごに7 お ...

svelte

Svelteのチュートリアルをやってみた

1 はじめに2 Svelteとは?2.1 Svelteの特徴2.2 Write less code2.3 No Virtual DOM2.4 Truly reactive3 Svelteのシンタックス ...

Next.js 入門してみた

1 はじめに1.1 なぜNext.jsなのか?2 Next.jsとは何か2.1 Static Site Generation (SSG)2.1.1 Incremental Static Regener ...

react-icon

[React初心者]カスタムフックについて学ぶ

1 はじめに2 Ract Hook(フック)とは3 カスタムフックの実装3.1 フックのルール3.2 カスタムフック3.3 カスタムフックの実装4 さいごに5 おすすめ書籍 はじめに 今回はReact ...

フォロー

blog-page_side_responsive

2019年12月
1234567
891011121314
15161718192021
22232425262728
293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。