差分

このページの2つのバージョン間の差分を表示します。

--- 00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート [2018/12/18] – 作成 adash333
+++ 00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート [2019/08/13] (現在) – [02.codesandboxのvue.jsでvuetifyのテンプレート] adash333
@@ 行 1: / 行 1: @@
 ===== 02.codesandboxのvue.jsでvuetifyのテンプレート =====
+ ---//2019/08/13 更新//
+/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を以下のコードをコピペします。
+<html>
+<script src="https://gist.github.com/adash333/5e28b9e5ea59c38eb04e24bff7c50419.js"></script>
+</html>
+https://codesandbox.io/s/vue-vuetify-template-2019-aug-dn1t2
+{{:00.vue用デザインフレームワークvuetify:pasted:20190813-070055.png}}
+=====  2019年1月以前の方法　=====
+/8/13時点で、Vuetifyの変更のためか、以下のやり方そのままではうまくいきません。
 CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。
@@ 行 15: / 行 51: @@
 {{:00.vue用デザインフレームワークvuetify:pasted:20181218-235216.png}}
-===== 上記の後、src/App.vueを編集し、Vuetifyによるデザインを行う =====
+===== 上記の後、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
+<html>
+<script src="https://gist.github.com/adash333/5a39a4915c1ed91d5ac97a380c55f0d1.js"></script>
+</html>
+以下のような感じになる。
+<html>
+<iframe src="https://codesandbox.io/embed/x2o3mpjwmq" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
+</html>
+===== ヘッダー＋αのみのシンプルなテンプレート『テンプレート2』 =====
+src/App.vue
+<html>
+<script src="https://gist.github.com/adash333/9ce50ce8af30f0a214f2372820da1c13.js"></script>
+</html>
+{{:00.vue用デザインフレームワークvuetify:pasted:20190102-181708.png}}
+===== 『テンプレート3』 =====
+https://qiita.com/nobu-maple/items/43c1228b8f04837d753b#４home-コンポーネント作成
+こちらのサイトのテンプレートを転記させて頂きます。
+(引用ここから)
+<code>
+<template>
+  <v-content>
+    <v-container fluid fill-height>
+      <v-layout justify-center fluid>
+        <v-flex xs12 offset-mx5>
+          Home Component.
+        </v-flex>
+      </v-layout>
+    </v-container>
+  </v-content>
+</template>
+<script>
+  export default {
+    data: () => ({
+    }),
+    props: {
+    },
+    created() {
+      console.log('Home Component created.')
+      this.initialize()
+    },
+    mounted() {
+      console.log('Home Component mounted.')
+    },
+    methods: {
+      initialize: function() {
+      },
+    },
+  }
+</script>
+</code>
+(引用ここまで)
+===== Vuetifyに関するリンク =====
+https://vuetifyjs.com/ja/
+{{:00.vue用デザインフレームワークvuetify:pasted:20190102-180523.png}}