サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

00.vue用デザインフレームワークvuetify:index.html


Vue.js用マテリアルデザインフレームワークVuetify

WebアプリをVue.jsを用いて作成するのであれば、初心者にとっては、Vuetifyというマテリアルデザインフレームワークを使用するのが、楽だと思います。

Googleのサイトのような味気ないデザインになってしまいますが、Google検索すると、テンプレートが豊富に出てくるので、『派手じゃないけどカッコよくデザインしたい!』という方に非常にお勧めです。

ただし、画像のリンクの設定については紛らわしいのでこちらをご覧ください。

https://vuetifyjs.com/ja/

メニュー

開発環境

Windows 8.1 Pro (Macでも同じです)
Chrome

CodeSandboxでやってみます。

ローカルパソコンで、Vue.js(Version2, Version3で多少導入方法が異なるようです)に対してVuetifyを使用する方法については、Vuetifyをインストールして使ってみる(2018年10月11日に更新@reflet)が分かりやすいです。

CodeSandboxで新規アプリを作成

  • Vanilla をクリック

  • すると、以下のような画面になります。

index.htmlを編集

index.htmlを、以下のように書き換えます。

すると、以下のようになります。

参考:https://vuetifyjs.com/ja/getting-started/quick-start

https://vuetifyjs.com/ja/examples/layouts/baseline

メニュー

写経元サイト

初めてのVuetifyのリンク

https://sitest.jp/blog/?p=11329
Vuetify.js を使ってマテリアルデザインに挑戦しよう!
2017年7月12日

https://windii.jp/nuxt/vuetify-tutorial/amp
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン

https://sugimotonote.com/2018/04/04/post-997/
Vue.js + vuetify + vue-cli でマテリアルデザインにトライ!
2018/4/4 2018/10/6

https://qiita.com/reflet/items/88dc298c8887ad517845
@reflet
2018年10月11日に更新
Vuetifyをインストールして使ってみる

https://windii.jp/frontend/nuxt/vuetify-tutorial
2018/11/11
Vuetifyチュートリアル。CSSを書かないマテリアルデザイン
→わかりやすい!写経してみたいです。

http://dokechin.hatenablog.com/entry/2018/03/19/080210
2018-03-19
Vuetify.jsでかっこいいWebトップ画面を作りたい
→ img のリンクの注意点


00.vue用デザインフレームワークvuetify/index.html.txt · 最終更新: 2019/03/08 by adash333