如何将 Vue 3 与 Vuetify 连接起来? [英] How to connect Vue 3 with Vuetify?

问题描述

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

I initialized a new, empty Vue application using Vue version 3. I then tried to add the plugin Vuetify with the command vue add vuetify, but received the following error. Any ideas on how to solve it?

推荐答案

目前可以使用 Vuetify 3 Alpha:

Currently possible with Vuetify 3 Alpha:

安装

为了使安装正确进行，需要 vue-cli 4.0.vue-cli 提供了更多说明.(检查 vue -V)

In order for the installation to proceed correctly, vue-cli 4.0 is required. Further instructions are available at vue-cli. (check with vue -V)

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

Once installed, generate a project with the following command using the 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

建议此时提交或隐藏您的更改，以防您需要回滚更改.

It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.

cd my-app
vue add vuetify

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

Once prompted, choose v3 (alpha):

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

使用

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

With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.

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

Next, navigate to your project directory and add Vuetify to your project:

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

const app = createApp(App);

app.use(vuetify);

app.mount("#app");

来源:

• https://next.vuetifyjs.com/en/getting-开始/安装/#installation
• https://next.vuetifyjs.com/en/introduction/roadmap

这篇关于如何将 Vue 3 与 Vuetify 连接起来?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！