LoginSignup
5
4

More than 3 years have passed since last update.

VuetifyでQiita風UIを作る - 目次

Last updated at Posted at 2019-04-16

みんな大好き(?)Vuetifyですが、割と日本語での記事は多くありません。(自分調べ)
今担当しているプロジェクトでVuetifyを採用して2年ほど経って、いろいろと知見がたまってきたので、Qiita風のUIを作りながら画面構築のテクニックを公開していきたいと思います。
ある程度コンポーネントごと区切って公開していきます。
(最終的にはNuxt.jsでアプリケーションとして公開できるといいな :kissing:)

Vuetifyとは

VuetifyはVue.jsで利用できる、マテリアルコンポーネントフレームワークです。
あらかじめWEBアプリケーションを構築するにあたって必要なコンポーネントはほとんど揃っているので、スタートアップ時のモック作成や、画面を仮組みするときに力を発揮します。(運用でも問題なく使えます。)
スタイルを書かずに綺麗な画面を作れるので、フロントエンドエンジニアのモチベーションが上がることも間違いなしです。 :joy:

目次

あくまでもQiita風なのでご了承を。
(そもそも完コピするならVuetify必要ないですし :sunglasses: )

ちょっとずつ書いていきます。
(Vuetify2がリリースされたので、書き直し中。。。)

  • ヘッダー
    • チーム切り替えメニュー
    • ホーム・コミュニティーメニュー
    • キーワード検索フィールド
    • ストック一覧リンク
    • 通知メニュー
    • ユーザーメニュー
    • レイアウト・レスポンシブ対応
  • フッター
  • トップ画面
    • タブ
    • 記事一覧

そのほか

こんなコンポーネントどう作るの?とか質問ありましたら、コメントください。

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4