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

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

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

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

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でやってみます。

今回は、https://sitest.jp/blog/?p=11329を写経してみたいと思います。

CodeSandboxで新規アプリを作成

  • Vanilla をクリック

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

index.htmlとsrc/App.vueの編集

Vuetify公式サイトの「CDNを利用」のところのサンプルコードの一部をコピーします。

https://vuetifyjs.com/ja/getting-started/quick-start#cdn-install

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

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

メニュー

写経元サイト

初めてのVuetifyのリンク

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

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.1545052513.txt.gz · 最終更新: 2018/12/17 by adash333