# インストール

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

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

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

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

これでプロジェクトが作成されました。次に、コマンドラインを使って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 can be added by installing the Nuxt Vuetify module.

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

Once installed, update your nuxt.config.js file to include the Vuetify module in the build.

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

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

# Webpack でのインストール

To install Vuetify into a Webpack project you need to add a few dependencies:

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

Once installed, locate your webpack.config.js file and copy the snippet below into the rules array. If you have an existing sass rule configured, you may need to apply some or all of the changes below. If you are looking to utilize the vuetify-loader for treeshaking, ensure that you are on version >=4 of Webpack. You can find more information on setting it up with webpack on the Treeshaking page.

// 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
              },
            },
          },
        ],
      },
    ],
  }
}

Create a plugin file for Vuetify, src/plugins/vuetify.js with the below content:

// 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)

If using vuetify-loader use the content below:

// src/plugins/vuetify.js

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

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

Navigate to your main entry point where you instantiate your Vue instance and pass the Vuetify object in as an option.

// src/main.js

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

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

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

Vuetify uses Google’s Roboto font and Material Design Icons. The simplest way to install these are to include their CDN’s in your main index.html file.

<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@6.x/css/materialdesignicons.min.css" rel="stylesheet">

# CDN での使用

To test using Vuetify without installing a template from Vue CLI, copy the code below into your index.html file. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the Vuetify starter on Codepen. While not recommended, if you need to utilize the CDN packages in a production environment, it is recommended that you scope the versions of your assets. For more information on how to do this, navigate to the jsdelivr website.

<!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@6.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での利用

To use Vuetify with Electron, add the electron-builder plugin via Vue CLI.

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

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

# PWAでの利用

If you are creating a new app with Vue CLI, you have the option to select Progressive Web App (PWA) Support in the first prompt after initiating vue create my-app. This package can also be installed into existing Vue CLI projects by entering the following command:

vue add pwa

# Cordovaでの利用

To use Vuetify with Cordova, add the Cordova plugin via Vue CLI:

# 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との使用

To use Vuetify with Capacitor, add the Capacitor plugin via Vue CLI:

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

# 使い方
$ yarn capacitor:serve

# Vuepressでの使用

There are 2 ways we can use Vuetify with default vuepress theme. Either by registering vuetify as a plugin in vuepress .vuepress/enhanceApp.js file (code sample below), or by using vuetify directly from CDN:

// 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` }],
  ]
}

# Nightlyビルド

The three development branches (master, dev, and next) are automatically published to NPM at 1200 UTC under the @vuetify/nightly namespace. They may be outdated or buggy and are therefore not officially supported and are only supplied for testing puposes. These builds can be installed with a package alias.

ブランチ名 目的 package.json entry Changelog
master バグ修正 "vuetify": "npm:@vuetify/nightly@latest" Changelog
dev 新機能 "vuetify": "npm:@vuetify/nightly@dev" Changelog
next 破壊的変更 "vuetify": "npm:@vuetify/nightly@next" Changelog

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:05/20/2022, 4:10:15 PM