00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート

差分

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

この比較画面へのリンク

--- 00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート [2019/01/04] – [ヘッダー＋αのみのシンプルなテンプレート] 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操作を行う。
@@ 行 41: / 行 77: @@
 {{: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に関するリンク =====

00.vue用デザインフレームワークvuetify/02.codesandboxのvue.jsでvuetifyテンプレート.1546586099.txt.gz · 最終更新: 2019/01/04 by adash333