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

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

ユーザ用ツール

サイト用ツール


サイドバー

目次

サルでもわかる機械学習

このページへのアクセス
今日: 1 / 昨日: 0
総計: 6

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アプリを作成

  • Vanilla をクリック

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

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つのファイルを以下に書き換える。

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

リンク


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