# 安装

让我们从 Vuetify 开始吧,这是世界上最流行的 Vue.js 框架,用于构建功能丰富、快速的应用程序。

# Vue CLI 安装

如果你还没有使用Vue CLI创建过Vue.js的项目,你可以尝试输入以下内容:

vue create my-app
# 切换到新项目目录
cd my-app

现在你已经实例化了一个项目,你可以使用 Vue CLI 添加Vuetify

vue add vuetify

# Vue UI 安装

Vuetify 也可以使用 Vue UI 安装,这是 Vue CLI 的新可视化应用。 确保你已经安装了最新版本的 Vue CLI,然后从你的终端中键入:

# 确保 Vue CLI 版本是 >= 3.0
vue --version
//或
vue -V

# 然后启动 UI
vue ui

这将启动 Vue 用户界面,并在浏览器中打开一个 新窗口。 在屏幕左侧,单击 插件。 在输入框中搜索 Vuetify 并安装插件。

安装 Vuetify 插件

# Nuxt 安装

Vuetify可以通过添加Nuxt Vuetify模块进行安装。

yarn add @nuxtjs/vuetify -D
# 或者
npm install @nuxtjs/vuetify -D

完成安装后,找到nuxt.config.js文件并打开编辑以添加Vuetify模块到构建中。

// nuxt.config.js
{
  buildModules: [
    // 简单使用
    '@nuxtjs/vuetify',

    // 和选项一起
    ['@nuxtjs/vuetify', { /* 模块选项 */ }]
  ]
}

# Webpack 安装

要将Vuetify安装到一个Webpack项目,您需要添加数个依赖文件。

yarn add vuetify
# 或
npm install vuetify
yarn add sass@~1.32 sass-loader deepmerge -D
# OR
npm install sass@~1.32 sass-loader deepmerge -D

安装后,找到 webpack.config.js文件并复制下面的代码到规则数组中。 如果你已经配置了一个现有的 sass 文件规则,您可能需要应用下方的一些甚至全部更改。 如果你正在寻求使用vuetify-loader进行摇树优化,请确保你的Webpack版本为 >=4。 您可以在 摇树页面 了解更多有关设置webpack的信息。

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

# Vueprs 的用法

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/enhanceApp.js
import Vuetify from 'vuetify'

export default ({
  Vue,      // VuePress 应用正在使用的Vue版本
  options,  // 根Vue实例的选项
  router,   // 应用的路由实例
  siteData,  // 站点元数据
}) => {
  Vue.use(Vuetify)
}

// 或者直接从CDN使用vuetify.
// 像下面一样更新 .vuepress/config.js 的头部部分.
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 Builds

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 变更日志
master Bug修复 "vuetify": "npm:@vuetify/nightly@latest" 变更日志
dev 新功能 "vuetify": "npm:@vuetify/nightly@dev" 变更日志
next Breaking changes "vuetify": "npm:@vuetify/nightly@next" 变更日志

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:05/20/2022, 4:10:15 PM