【Vue.js入門】Vuetifyの導入
Vue.jsで簡単なユーザ管理アプリを作ろうとしています。
UIコンポートネントは、Vuetifyというものを使用してみます。
Vuetifyの利用
まず、Vuetifyの公式ドキュメントを見てみました。
Quick Start – Vuetify.js
https://vuetifyjs.com/ja/getting-started/quick-start
ここによると、CDNでの利用が可能だそうで、Vue CLIを導入済みの私は、Vuetify.jsだけCDNで利用しようと、以下の3行を<head>に追加しました。
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
ただ、その後のサンプルでエラーとなり、解消方法がわからなかったこともあり、インストールすることにしました。
Vuetify.jsのインストール
Vue CLIのインストールはこの記事で実施しました。
Veutifyのインストールは、Quick Startを参考に、
vue add vuetify
だけだそうで、簡単にインストールできました。
アプリの方の修正は、index.htmlの<head>に以下のCSSを追加しました。
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
CSSの外部読み込みは、vue add vuetifyでインストールしているので不要かと思ったのですが、はずすとスタイルが適用されなかったため、残しました。