00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify
差分
このページの2つのバージョン間の差分を表示します。
両方とも前のリビジョン前のリビジョン次のリビジョン | 前のリビジョン | ||
00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify [2018/12/17] – [CodeSandboxで新規Vue.jsアプリを作成] adash333 | 00.vue用デザインフレームワークvuetify:01.codesandboxのvue.jsでvuetify [2018/12/18] (現在) – [解説] adash333 | ||
---|---|---|---|
行 5: | 行 5: | ||
https:// | https:// | ||
+ | |||
+ | ===== 今回作るもの ===== | ||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
===== 開発環境 ===== | ===== 開発環境 ===== | ||
行 14: | 行 19: | ||
{{: | {{: | ||
- | *Vanilla をクリック | + | *Vue をクリック |
- | {{: | + | {{: |
*すると、以下のような画面になります。 | *すると、以下のような画面になります。 | ||
- | {{: | + | {{: |
- | ===== index.htmlとsrc/ | + | ===== 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/ | ||
+ | |||
+ | index.htmlとsrc/ | ||
+ | |||
+ | < | ||
+ | <script src=" | ||
+ | </ | ||
+ | |||
+ | 結果は以下のようになる。 | ||
+ | |||
+ | < | ||
+ | <iframe src=" | ||
+ | </ | ||
+ | |||
+ | ===== 解説 ===== | ||
+ | |||
+ | Vue.jsにVuetifyを導入するためには、以下の3つが必要です。 | ||
+ | |||
+ | -Vuetifyをnpm install(CodeSandboxでは、Add DependencyからVuetifyをインストール) | ||
+ | -index.htmlの< | ||
+ | -src/ | ||
+ | |||
+ | index.htmlの追加コード | ||
+ | < | ||
+ | // </ | ||
+ | <link href=" | ||
+ | </ | ||
+ | |||
+ | src/ | ||
+ | < | ||
+ | import Vuetify from " | ||
+ | import " | ||
+ | |||
+ | Vue.use(Vuetify); | ||
+ | </ | ||
+ | |||
+ | 上記の3つの作業を行えば、src/ | ||
+ | ===== リンク ====== | ||
+ | |||
+ | https:// | ||
https:// | https:// | ||
+ | |||
+ | |||
00.vue用デザインフレームワークvuetify/01.codesandboxのvue.jsでvuetify.1545056078.txt.gz · 最終更新: 2018/12/17 by adash333