===== 02.codesandboxのvue.jsでvuetifyのテンプレート ===== ---//2019/08/13 更新// 2019/8/13時点で、やり方が変更になっています。 https://codesandbox.io/s/vue-vuetify-template-2019-aug-dn1t2 {{:00.vue用デザインフレームワークvuetify:pasted:20190813-063706.png}} CodeSandboxで新規Vue.jsアプリを作成し、以下の操作を行います。 -https://codesandbox.io/で、Create Sandboxをクリックし、Vue.jsアプリを作成 -Add Dependencyから、Vuetifyをインストール -public/index.htmlの編集 -src/main.jsの編集 -src/App.vueの編集 {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064151.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064211.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064325.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20190813-064718.png}} public/index.htmlと、src/main.jsと、src/App.vueを以下のコードをコピペします。 https://codesandbox.io/s/vue-vuetify-template-2019-aug-dn1t2 {{:00.vue用デザインフレームワークvuetify:pasted:20190813-070055.png}} ===== 2019年1月以前の方法　===== 2019/8/13時点で、Vuetifyの変更のためか、以下のやり方そのままではうまくいきません。 CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。 -Add Dependencyから、Vuetifyをインストール -index.htmlの編集 -src/main.jsの編集 {{:00.vue用デザインフレームワークvuetify:pasted:20181218-235049.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20181218-235216.png}} ===== 上記の後、src/App.vueを編集し、Vuetifyによるデザインを行う『テンプレート1』 ===== 例えば、src/App.vueを以下のように編集すると、ヘッダーとフッターが表示される。参考：https://vuetifyjs.com/ja/examples/layouts/baseline https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/footer/companyFooter.vue 以下のような感じになる。 ===== ヘッダー＋αのみのシンプルなテンプレート『テンプレート2』 ===== src/App.vue {{:00.vue用デザインフレームワークvuetify:pasted:20190102-181708.png}} ===== 『テンプレート3』 ===== https://qiita.com/nobu-maple/items/43c1228b8f04837d753b#４home-コンポーネント作成こちらのサイトのテンプレートを転記させて頂きます。 (引用ここから)

(引用ここまで) ===== Vuetifyに関するリンク ===== https://vuetifyjs.com/ja/ {{:00.vue用デザインフレームワークvuetify:pasted:20190102-180523.png}}