如何将 Vue 3 与 Vuetify 连接起来？答案

【问题标题】：How to connect Vue 3 with Vuetify?如何将 Vue 3 与 Vuetify 连接起来？
【发布时间】：2020-11-02 10:05:26
【问题描述】：

我使用 Vue 版本 3 初始化了一个新的空 Vue 应用程序。然后我尝试使用命令 vue add vuetify 添加插件 Vuetify，但收到以下错误。关于如何解决它的任何想法？

【问题讨论】：

标签： vue.js vuetify.js vuejs3

【解决方案1】：

目前可以使用 Vuetify 3 Alpha：

安装

为了正确进行安装，需要 vue-cli 4.0。更多说明可在vue-cli 获得。（检查vue -V）

安装后，使用 vue-cli 4.0 使用以下命令生成项目：

vue create my-app

出现提示时，选择Vue 3 Preview：

? Please pick a preset:
    Default ([Vue 2] babel, eslint)
  > Default (Vue 3 Preview) ([Vue 3] babel, eslint)
    Manually select features

建议此时提交或存储您的更改，以防您需要回滚更改。

cd my-app
vue add vuetify

出现提示后，选择 v3 (alpha)：

? Choose a preset: (Use arrow keys)
  Default (recommended)
  Prototype (rapid development)
  Configure (advanced)
> v3 (alpha)

用法

在 Vue 3.0 中，Vue 应用程序（以及扩展为 Vuetify）的初始化过程发生了变化。使用新的 createVuetify 方法，传递给它的选项也发生了变化。有关详细信息，请参阅文档功能部分中的页面。

接下来，导航到您的项目目录并将 Vuetify 添加到您的项目中：

import { createApp } from "vue";
import vuetify from "./plugins/vuetify";
import App from "./App";

const app = createApp(App);

app.use(vuetify);

app.mount("#app");

来源：

【讨论】：

【解决方案2】：

虽然没有 Vuetify 3，但我会使用 Vue 2.x 和 Vuetify 2.x 和 install the Composition API as a package/plugin：

npm install @vue/composition-api

然后导入你的项目（main.js）：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)

最后在你的组件中使用它：

// use the APIs
import { ref, reactive } from '@vue/composition-api'

请注意此方法的limitations。

【讨论】：

同意你的观点，这是当前状态的最佳解决方案。

【解决方案3】：

截至 2020 年 7 月，Vuetify 2.x 不再支持 Vue 3。根据 Vuetify 的任务任务列表为 Vue 3 重构所有组件：https://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba

【讨论】：

此时，不要屏住呼吸 - 上面的板显示已完成 6/124 个任务。

【解决方案4】：

Vuetify 当前与 Vue 3 不兼容。

鉴于 Vue 3 中的重大更改和实现差异的数量，需要重写整个库。

截至 2021 年 1 月，他们的目标是在 2021 年第 1 季度发布 alpha 版本，但普通用户不应该期望在今年年底之前看到发布版本，甚至可能在 2022 年初。

在此之前，还有其他与 Vue 3 兼容的替代方案，例如 Prime Vue。我相信他们有可以连接的 Material Design 主题和相当数量的组件（尽管在 v-app 风格的功能协调方面略有不足）。

【讨论】：

【解决方案5】：

你可以试试 vue 3 和 vuetify 的 alpha https://next.vuetifyjs.com/

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。