内容へ移動
サルでもわかるWEBプログラミング
フリーソフトのみでホームページ作成
ユーザ用ツール
ログイン
サイト用ツール
検索
ツール
文書の表示
以前のリビジョン
バックリンク
最近の変更
メディアマネージャー
サイトマップ
ログイン
>
最近の変更
メディアマネージャー
サイトマップ
現在位置:
index.html
»
00.vue用デザインフレームワークvuetify
»
03.codesandboxvuetifyでcard
トレース:
00.vue用デザインフレームワークvuetify:03.codesandboxvuetifyでcard
この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
===== 03.codesandbox上でVue.js-VuetifyでCard ===== Vuetifyで、いわゆるカードCardというものを表示します。 公式サイト:https://vuetifyjs.com/ja/components/cards ===== メニュー ===== [[00.vue用デザインフレームワークvuetify:index.html|Vue.js用マテリアルデザインフレームワークVuetify]] [[00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify|01.CodeSandboxのVue.jsでVuetify]] [[00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート|02.codesandboxのvue.jsでvuetifyのテンプレート]] [[00.vue用デザインフレームワークvuetify:03.codesandboxvuetifyでcard|03.codesandbox上でVue.js-VuetifyでCard]] [[00.vue用デザインフレームワークvuetify:04.vuetifyでformフォーム|04.CodeSandboxでVuetifyを用いたフォーム作成]] [[00.vue用デザインフレームワークvuetify:05.vuetifyでheaderヘッダーとfooterフッター|05.Vuetifyでheaderヘッダーとfooterフッター]] [[00.vue用デザインフレームワークvuetify:06.vuetifyでアイコンを利用|06.vuetifyでアイコンを利用]] ===== 開発環境 ===== <code> パソコン(WindowsでもMacでも同じですが、私はWindows10 Proを使用) Chrome </code> 今回利用する環境 <code> CodeSandbox Vue 2.5.2 Vuetify 1.3.15 </code> ===== 今回作成するもの ===== {{:00.vue用デザインフレームワークvuetify:pasted:20181220-222656.png}} ==== 1. CodeSandbox上で、Vue.jsアプリを新規作成 ==== *https://codesandbox.io/へ行き、画面右上の、『Create Sandbox』をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-171907.png}} *Vue をクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-171955.png}} *以下のような画面になります。 {{:09.emailとpasswordでパスワード制限:pasted:20181219-172514.png}} ==== 2. Vuetifyのインストールとindex.htmlの編集 ==== *CSSフレームワークとして、Vuetifyを用いるために、以下のように、Add Dependencyをクリック {{:09.emailとpasswordでパスワード制限:pasted:20181219-173748.png}} *Vuetify と入力して、Vuetifyをクリックして、インストール {{:09.emailとpasswordでパスワード制限:pasted:20181219-173833.png}} *以下のようになります {{:09.emailとpasswordでパスワード制限:pasted:20181219-173914.png}} *次に、vuetifyとfirebaseを利用できるようにするために、index.htmlとsrc/main.jsを編集します。 <html> <script src="https://gist.github.com/adash333/8dda68b30f2ba68e23aa73a249184550.js"></script> </html> ==== 3. src/App.vueの編集 ==== src/App.vueを以下のように変更して、ヘッダーheader、フッターfooterとカードcardを表示します。 <html> <script src="https://gist.github.com/adash333/9ce50ce8af30f0a214f2372820da1c13.js"></script> </html> {{:09.emailとpasswordでパスワード制限:pasted:20181220-221651.png}} 公式サイト:https://vuetifyjs.com/ja/components/cards
00.vue用デザインフレームワークvuetify/03.codesandboxvuetifyでcard.txt
· 最終更新: 2019/01/28 by
adash333
ページ用ツール
文書の表示
以前のリビジョン
バックリンク
文書の先頭へ