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

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

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

このページへのアクセス
今日: 1 / 昨日: 0
総計: 6

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をインストールして使ってみる


00.vue用デザインフレームワークvuetify/index.html.1546292399.txt.gz · 最終更新: 2018/12/31 by adash333