时间戳

首页 > 解决方案 > 如何将 Vue 3 与 Vuetify 连接起来？

vue.js - 如何将 Vue 3 与 Vuetify 连接起来？

问题描述

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

错误：您无法调用

标签： vue.jsvuetify.jsvuejs3

解决方案

目前可以使用 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");

资源：

推荐阅读