サルでもわかるWEBプログラミング

フリーソフトのみでホームページ作成

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面へのリンク

両方とも前のリビジョン前のリビジョン
次のリビジョン
前のリビジョン
00.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート [2019/01/08] – [『テンプレート3』] adash33300.vue用デザインフレームワークvuetify:02.codesandboxのvue.jsでvuetifyテンプレート [2019/08/13] (現在) – [02.codesandboxのvue.jsでvuetifyのテンプレート] adash333
行 1: 行 1:
 ===== 02.codesandboxのvue.jsでvuetifyのテンプレート ===== ===== 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を以下のコードをコピペします。
 +
 +<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月以前の方法 =====
 +2019/8/13時点で、Vuetifyの変更のためか、以下のやり方そのままではうまくいきません。
  
 CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。 CodeSandboxで新規Vue.jsアプリを作成後、以下の3操作を行う。


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

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki