• 技術が集うTECH GUILD

    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でインストールしているので不要かと思ったのですが、はずすとスタイルが適用されなかったため、残しました。


    コメントを残す

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください