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

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

ユーザ用ツール

サイト用ツール


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


差分

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

この比較画面にリンクする

両方とも前のリビジョン 前のリビジョン
次のリビジョン
前のリビジョン
00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify [2018/12/18]
adash333 [リンク]
00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify [2018/12/18] (現在)
adash333 [解説]
行 60: 行 60:
 <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> <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> </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を使用できるらしいです。
 ===== リンク ====== ===== リンク ======
  


00.vue用デザインフレームワークvuetify/01.codesandboxのvue.jsでvuetify.1545137727.txt.gz · 最終更新: 2018/12/18 by adash333