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

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

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

sidebar

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


01.CodeSandboxのVue.jsでVuetify

以下のCodeSandboxを写経してみたい。

https://codesandbox.io/s/0orq908m3w

今回作るもの

開発環境

Chrome(OSはWindowsでもMacでも可)

CodeSandboxで新規Vue.jsアプリを作成

  • Vue をクリック

  • すると、以下のような画面になります。

DependenciesにVuetifyを加える

通常の開発の場合は、

npm install vuetify

とするところだが、CodeSandboxでは、以下のようにVuetifyをnpm installする。

  • 画面左側の列を下の方にドラッグしていき、Add Dependencyをクリック

  • Search or enter npm dependency のところに、vuetify と打ち込む

  • すると、リストの一番上に、Vuetifyが出てくるので、その部分をクリックすると、Vuetifyがinstallされる。インストール後は、画面左側のDependenciesのところに、vueに加えて、vuetifyが表示される。

index.htmlとsrc/App.vueとsrc/main.jsの編集

index.htmlとsrc/App.vueとsrc/main.jsの3つのファイルを以下に書き換える。

結果は以下のようになる。

解説

Vue.jsにVuetifyを導入するためには、以下の3つが必要です。

  1. Vuetifyをnpm install(CodeSandboxでは、Add DependencyからVuetifyをインストール)
  2. index.htmlの<head></head>内に、“Material+Icons”を読み込む
  3. src/main.jsで、vuetifyとvuetify.cssをimportして、Vue.use(Vuetify);する。

index.htmlの追加コード

// </head>の直前に以下を挿入
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet"/>

src/main.jsの追加コード

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.css";

Vue.use(Vuetify);

上記の3つの作業を行えば、src/App.vueや、その配下のcomponentで、Vuetifyを使用できるらしいです。

リンク


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