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

文書の過去の版を表示しています。

01.CodeSandboxのVue.jsでVuetify

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

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

通常の開発の場合は、

npm install vuetify

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

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

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

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

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

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

Vue.use(Vuetify);