===== 01.CodeSandboxのVue.jsでVuetify ===== 以下のCodeSandboxを写経してみたい。 https://codesandbox.io/s/0orq908m3w ===== 今回作るもの ===== ===== 開発環境 ===== Chrome(OSはWindowsでもMacでも可) ===== CodeSandboxで新規Vue.jsアプリを作成 ===== *https://codesandbox.io/へ行って、画面右上の『Create Sandbox』をクリック {{:00.vue用デザインフレームワークvuetify:pasted:20181217-210013.png}} *Vue　をクリック {{:00.vue用デザインフレームワークvuetify:pasted:20181217-210123.png|}} *すると、以下のような画面になります。 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-210159.png|}} ===== DependenciesにVuetifyを加える ===== 通常の開発の場合は、


npm install vuetify

とするところだが、CodeSandboxでは、以下のようにVuetifyをnpm installする。 *画面左側の列を下の方にドラッグしていき、Add Dependencyをクリック {{:00.vue用デザインフレームワークvuetify:pasted:20181217-234425.png}} *Search or enter npm dependency のところに、vuetify　と打ち込む {{:00.vue用デザインフレームワークvuetify:pasted:20181217-234559.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20181217-234625.png}} *すると、リストの一番上に、Vuetifyが出てくるので、その部分をクリックすると、Vuetifyがinstallされる。インストール後は、画面左側のDependenciesのところに、vueに加えて、vuetifyが表示される。 {{:00.vue用デザインフレームワークvuetify:pasted:20181217-234738.png}} {{:00.vue用デザインフレームワークvuetify:pasted:20181217-234825.png}} ===== index.htmlとsrc/App.vueとsrc/main.jsの編集 ===== index.htmlとsrc/App.vueとsrc/main.jsの３つのファイルを以下に書き換える。結果は以下のようになる。 ===== 解説 ===== Vue.jsにVuetifyを導入するためには、以下の3つが必要です。 -Vuetifyをnpm install(CodeSandboxでは、Add DependencyからVuetifyをインストール) -index.htmlの内に、"Material+Icons"を読み込む -src/main.jsで、vuetifyとvuetify.cssをimportして、Vue.use(Vuetify);する。 index.htmlの追加コード


// の直前に以下を挿入

src/main.jsの追加コード


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

Vue.use(Vuetify);

上記の3つの作業を行えば、src/App.vueや、その配下のcomponentで、Vuetifyを使用できるらしいです。 ===== リンク ====== https://codesandbox.io/s/0orq908m3w https://codesandbox.io/s/3yv7q36lq