サルでもわかる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つが必要です。

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を使用できるらしいです。