差分

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

--- 00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify [2018/12/17] – [CodeSandboxで新規Vue.jsアプリを作成] adash333
+++ 00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify [2018/12/18] (現在) – [解説] adash333
@@ 行 5: / 行 5: @@
 https://codesandbox.io/s/0orq908m3w
+===== 今回作るもの =====
+<html>
+<iframe src="https://codesandbox.io/embed/o5vq340jv6" 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>
 ===== 開発環境 =====
@@ 行 14: / 行 19: @@
 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-210013.png}}
-  *Vanilla　をクリック
+  *Vue　をクリック
-{{:00.vue用デザインフレームワークvuetify:pasted:20181217-221431.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-210123.png|}}
   *すると、以下のような画面になります。
-{{:00.vue用デザインフレームワークvuetify:pasted:20181217-221505.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-210159.png|}}
-===== index.htmlとsrc/App.vueの編集 =====
+===== DependenciesにVuetifyを加える =====
+通常の開発の場合は、
+<code>
+npm install vuetify
+</code>
-===== リンク ======
+とするところだが、CodeSandboxでは、以下のようにVuetifyをnpm installする。
+  *画面左側の列を下の方にドラッグしていき、Add Dependencyをクリック
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-234425.png}}
+  *Search or enter npm dependency のところに、vuetify　と打ち込む
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-234559.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-234625.png}}
+  *すると、リストの一番上に、Vuetifyが出てくるので、その部分をクリックすると、Vuetifyがinstallされる。インストール後は、画面左側のDependenciesのところに、vueに加えて、vuetifyが表示される。
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-234738.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20181217-234825.png}}
+===== index.htmlとsrc/App.vueとsrc/main.jsの編集 =====
+index.htmlとsrc/App.vueとsrc/main.jsの３つのファイルを以下に書き換える。
+<html>
+<script src="https://gist.github.com/adash333/725ff6a41c330001dca681aeae0aa669.js"></script>
+</html>
+結果は以下のようになる。
+<html>
+<iframe src="https://codesandbox.io/embed/o5vq340jv6" 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>
+===== 解説 =====
+Vue.jsにVuetifyを導入するためには、以下の3つが必要です。
+  -Vuetifyをnpm install(CodeSandboxでは、Add DependencyからVuetifyをインストール)
+  -index.htmlの<head></head>内に、"Material+Icons"を読み込む
+  -src/main.jsで、vuetifyとvuetify.cssをimportして、Vue.use(Vuetify);する。
+index.htmlの追加コード
+<code>
+// </head>の直前に以下を挿入
+<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"/>
+</code>
+src/main.jsの追加コード
+<code>
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.css";
+Vue.use(Vuetify);
+</code>
+上記の3つの作業を行えば、src/App.vueや、その配下のcomponentで、Vuetifyを使用できるらしいです。
+===== リンク ======
+https://codesandbox.io/s/0orq908m3w
 https://codesandbox.io/s/3yv7q36lq