# インストール

世界で最も人気のあるVue.jsフレームワークVuetifyを始めましょう。豊富な機能を備えた非常に高速なアプリケーションを構築できます。

# Vue CLI によるインストール

新しいVue.jsプロジェクトをまだ作成していない場合は、 次のように入力することでVue CLIを使用して、新規作成できます:

vue create my-app
# 新しいプロジェクトディレクトリに移動します。
cd my-app

インスタンス化されたプロジェクトが作成されたので、cliを使用して Vuetify Vue CLI パッケージ を追加できるようになりました。

vue add vuetify

# Vue UIによるインストール

Vuetifyは、Vue CLIの新しいビジュアルアプリケーションである Vue UIを使用してインストールすることもできます。 Vue CLI の最新バージョンがインストールされていることを確認し、次のように入力します:

# Vue CLI が >= 3.0 であることを確認します。
vue --version

# その後、UIを開始します。
vue ui

これにより、Vueユーザーインターフェイスが起動し、ブラウザで新しいウィンドウが開きます。 画面の左側にある Plugins をクリックします。 画面が切り替わったら、入力フィールドでVuetifyを検索し、プラグインをインストールします。

Vuetify プラグインのインストール

# Nuxt でのインストール

Vuetifyは、Nuxt Vuetifyモジュールをインストールすることで追加できます。

yarn add @nuxtjs/vuetify -D
# または
npm install @nuxtjs/vuetify -D

インストールしたら、nuxt.config.jsファイルを更新して、ビルドにVuetifyモジュールを含めます。

// nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

# Webpack でのインストール

VuetifyをWebpackプロジェクトにインストールするには、いくつかの依存関係を追加する必要があります。

yarn add vuetify
# または
npm install vuetify
yarn add sass sass-loader deepmerge -D
# または
npm install sass sass-loader deepmerge -D

インストールしたら、webpack.config.jsファイルを探して、以下のスニペットをrules配列にコピーしてください。 既存の sass ルールが設定されている場合は、以下のいくつかまたはすべての変更を適用する必要があります。 ツリーシェイキングのために vuetify-loader を利用しようとしている場合は、Webpack バージョン >=4 であることを確認してください。 webpackの設定については、 Treeshaking ページをご覧ください。

// webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              indentedSyntax: true // optional
            },
            // Requires >= sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }
}

Vuetify用のプラグインファイルsrc/plugins/vuetify.jsを以下の内容で作成します:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

vuetify-loader を使用する場合は、以下の内容を使用します:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Vue インスタンスを初期化しているアプリケーションの main エントリーポイントに移動して、Vuetify オブジェクトをオプションとして渡してください。

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

# フォントのインストール

VuetifyはGoogleのRoboto フォントとMaterial Designアイコンを使用しています。 これらをインストールする最も簡単な方法は、メインのindex.htmlにCDNを含めることです。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">

# CDN での使用

Vue CLI からテンプレートをインストールせずに Vuetify を試用するには、以下のコードを index.html ファイルにコピーします。 これにより、VueとVuetifyの最新バージョンがリンク先から呼び出され、コンポーネントの利用を開始できるようになります。 Vuetifyスターター をCodepenで使用することもできます。 推奨されていませんが、実稼働環境でCDN パッケージを利用する必要がある場合は、アセットのバージョンを対象にすることをお勧めします。 方法の詳細については、jsdelivr のウェブサイトに移動してください。

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>Hello world</v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
    })
  </script>
</body>
</html>

# Electronでの利用

ElectronでVuetifyを使用するには、Vue CLI経由でelectron-builderプラグインを追加します。

# インストール
vue add electron-builder

# 使い方
yarn electron:build
yarn electron:serve

# PWAでの利用

Vue CLI で新しいアプリを作成する場合。 vue create my-appを作成した後、最初のプロンプトでProgressive Web App (PWA)サポートを選択するオプションがあります。 このパッケージは、以下のコマンドを入力することで、既存の Vue CLI プロジェクトにインストールすることもできます:

vue add pwa

# Cordovaでの利用

Cordova で Vuetify を使用するには、Vue CLI を使用して Cordova プラグインを追加します:

# cordova がインストールされていない場合
yarn global add cordova

# インストール
vue add cordova

# 使い方
yarn cordova-serv-android # Development Android
yarn cordova-build-android # Build Android
yarn cordova-serve-ios # Development IOS
yarn cordova-build-ios # Build IOS
yarn cordova-serve-browser # Development Browser
yarn cordova-build-browser # Build Browser

# Capacitorとの使用

CapacitorでVuetifyを使用するには、Vue CLI経由で Capacitor プラグインを追加します:

# インストール
$ vue add @nklayman/capacitor

# 使い方
$ yarn capacitor:serve

# Vuepressでの使用

Vuetifyをデフォルトの vuepress テーマで使用する方法は2つあります。 vuepress .vuepress/enhanceApp.js ファイル (以下のコードサンプル) にvuetifyをプラグインとして登録するか、CDNから直接vuetifyを使用してください:

// vuetifyをvuepressでのグローバルプラグインとして登録する
// .vuepress/enhanceApp.js
import Vuetify from 'vuetify'

export default ({
  Vue,      // VuePressアプリで使用されているVueのバージョン
  options,  // ルート Vue インスタンスのオプション
  router,   // アプリのrouterインスタンス
  siteData,  // site metadata
}) => {
  Vue.use(Vuetify)
}

// または、CDNから直接vuetifyを使用することもできます。
// .vuepress/config.jsのheadセクションを以下のように更新します。
module.exports = {
  head: [
    ['link', {
      rel: 'stylesheet',
      href: `https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css`
    }],
    ['script', { src: `https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js` }],
    ['script', { src: `https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js` }],
  ]
}

準備はできましたか?

チーム によって選択された関連コンテンツで学習を続けるか、下のナビゲーションリンクを使用してページ間を移動します。
GitHub でこのページを編集する
最終更新日:04/07/2021, 3:01:23 AM