开始使用 Vuetify 3

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

安装

Vuetify 支持多个不同的安装方式，最常用的脚手架工具是 create-vuetify

要了解更多关于支持的包管理器的信息，请访问他们的官方网站：

• yarn
• npm
• pnpm
• bun

使用 Vite

要开始使用 Vuetify 3，只需将以下代码粘贴到你的终端：

yarn

yarn create vuetify

npm

npm create vuetify@latest

pnpm

pnpm create vuetify

bun

bun create vuetify

此命令在使用脚手架生成您的 Vue / Vuetify 3 项目之前会提示您有几个配置选项。

success Installed "create-vuetify@x.x.x" with binaries:
    - create-vuetify

? Project name: ❯ vuetify-project // the folder to generate your application
? Use TypeScript?: ❯ No / Yes
? Would you like to install dependencies with yarn, npm, or pnpm?:
  ❯ yarn
    npm
    pnpm
    bun
    none

在进行选择后， create-vuetify 将生成您新应用程序的结构。

使用脚手架搭建完成后，通过运行以下命令启动 vite 开发服务器：

cd vuetify-project
yarn dev

使用 Nuxt 3

Nuxt 是一个开源框架，它有一些有用的功能，可以让你快速开始开发一个全栈 Vue 应用程序，比如基于文件的路由、SSR 和组件自动导入。next 由 Vite 提供支持，因此在 next 3 中使 Vuetify 工作的步骤与上面描述的手动步骤非常相似。

通过执行以下命令开始创建下一个应用程序:

yarn

npx nuxi@latest init <project-name>
cd <project-name>
yarn

npm

npx nuxi@latest init <project-name>
cd <project-name>
npm install

pnpm

pnpm dlx nuxi@latest init <project-name>
# Make sure you have `shamefully-hoist=true` in `.npmrc` before running pnpm install
cd <project-name>
pnpm install

bun

bunx nuxi@latest init <project-name>
cd <project-name>
bun install

然后安装所需的 Vuefity 模块作为依赖项:

yarn

yarn add -D vuetify vite-plugin-vuetify
yarn add @mdi/font

npm

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

pnpm

pnpm i -D vuetify vite-plugin-vuetify
pnpm i @mdi/font

bun

bun add -d vuetify vite-plugin-vuetify
bun add @mdi/font

接下来，将以下条目集成到您的nuxt.config.ts文件中:

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
export default defineNuxtConfig({
  //...
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
    //...
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
});

Nuxt 允许您通过使用其内置钩子来更改其 Vite 配置 vite:extendConfig。在它的回调函数中，将 Vuetify 插件添加到 Vite 插件数组中。 解析传递给 Vuetify 组件的相对资产 url，例如 VImg (e.g. ~/assets/img/some.png)， transformAssetUrls 函数需要添加到 vite 条目中。

在下一步中，初始化 Vuetify 并将其添加到主 Vue 应用程序实例中。这可以在 plugins 文件夹中完成，因为任何放在这个文件夹中的插件都会在启动时被 next 自动加载。

// import this after install `@mdi/font` package
import "@mdi/font/css/materialdesignicons.css";

import "vuetify/styles";
import { createVuetify } from "vuetify";

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    // ... your configuration
  });
  app.vueApp.use(vuetify);
});

最后，在 ~/app.vue 或 ~/layouts/default.Vue 中添加 Vuetify 的根 VApp 组件，例如:

<template>
  <NuxtLayout>
    <v-app>
      <NuxtPage />
    </v-app>
  </NuxtLayout>
</template>

或者

<template>
  <v-app>
    <!-- .... -->
  </v-app>
</template>

现在，您应该可以访问 next 应用程序中的所有 Vuetify 组件和工具。

Using Laravel Mix

import { createApp } from "vue";

// Vuetify
import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

// Components
import App from "./App.vue";

const vuetify = createVuetify({
  components,
  directives,
});

createApp(App).use(vuetify).mount("#app");

要导入你需要添加到 webpack.mix.js 中的字体:

mix.copy("node_modules/@mdi/font/fonts/", "dist/fonts/");

使用 CDN

我们建议使用jsdelivr提供的最新版本的 Vuetify 3。包括所有组件和样式。

https://cdn.jsdelivr.net/npm/vuetify@3.6.14/dist/vuetify.min.css

https://cdn.jsdelivr.net/npm/vuetify@3.6.14/dist/vuetify.min.js

const { createApp } = Vue;
const { createVuetify } = Vuetify;

const vuetify = createVuetify();

const app = createApp();
app.use(vuetify).mount("#app");

现有项目

如果您想要 Vuetify 添加到现有的项目，或者不想使用脚手架工具，请按照这些步骤操作。

yarn

yarn add vuetify

npm

npm i vuetify

pnpm

pnpm i vuetify

bun

bun add vuetify

TIP

如果您是从早期版本的 Vuetify 升级，请务必查看我们的 升级指南

在创建 Vue 应用程序的文件中，添加以下代码

import { createApp } from "vue";

// Vuetify
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

// Components
import App from "./App.vue";

const vuetify = createVuetify({
  components,
  directives,
});

createApp(App).use(vuetify).mount("#app");

这将包括所有的组件和指令，不管你是否在使用它们。如果您只想包含使用过的组件，请查看 Vite 或 Webpack 插件，取决于你的设置。这些插件还可以定制 SCSS 变量。

最后，不要忘记安装 icons。

SSR 语句

Vue 3 无法自动检测是否使用了 SSR—因此 next、gridsome 和其他 SSR 框架必须手动将SSR选项设置为true，以便正确呈现应用程序。

import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";

const vuetify = createVuetify({
  ssr: true,
});

Exposed exports

以下是 Vuetify 框架的导出路径:

JS / TS

名称	描述
vuetify	主要入口。包含 createVuetify() 和公共组合式函数。
vuetify/styles	预编译的全局 CSS（reset、utilities 等），没有组件样式。如果在 vite 或 webpack 中设置 styles.configFile，将会被重定向到 SASS。
vuetify/components	所有组件。不推荐，因为它将包含开发过程中的所有组件，从而减慢您的构建速度。
vuetify/components/<name>	单个组件，按顶层名称分组，如 VListItem、VListGroup 和 VListItemTitle 都在 vuetify/components/VList 中。
vuetify/directives	所有指令。
vuetify/directives/<name>	单个指令。
vuetify/blueprints/<name>	Prop 默认值的预设集合。
vuetify/locale	Vuetify 组件中字符串的翻译。每种语言都是已命名的输出语言。
vuetify/locale/adapters/<name>	用于从其他库（例如 vue-i18n）中提取翻译的适配器。
vuetify/iconsets/<name>	图标预设，具体查看 Icon Fonts 页面。

SASS

参见 SASS Variables 了解更多信息。

名称	描述
vuetify	全局 CSS（重置、实用程序等），没有组件样式。相当于 JS 中的 vuetify/styles 。
vuetify/settings	所有 SASS 变量，包括组件变量。
vuetify/tools	Mixin 和函数。

每日构建

三个开发分支(master, dev，和next)在 1200 UTC 自动发布到 NPM @vuetify/每晚名称空间。它们可能已经过时或有 bug，因此不受官方支持，仅用于测试目的。这些构建可以使用 package alias进行安装。

分支名称	用途	package.json 条目	变更日志
master	Bug 修复	"vuetify": "npm:@vuetify/nightly@latest"	变更日志
dev	新功能	"vuetify": "npm:@vuetify/nightly@dev"	变更日志
next	不兼容更新	"vuetify": "npm:@vuetify/nightly@next"	变更日志

 "devDependencies": {
-  "vuetify": "^3.3.0"
+  "vuetify": "npm:@vuetify/nightly@3.3.0-master.2023-05-21"
 }

Questions

在我们的 Discord 社区 告诉我们或在我们的Issue 生成器 上创建一个请求。