我使用 Vue 版本 3 初始化了一个新的空 Vue 应用程序。然后我尝试Vuetify
使用 command添加插件vue add vuetify
,但收到以下错误。关于如何解决它的任何想法?
5 回答
目前可以使用 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");
资源:
截至 2020 年 7 月,Vuetify 2.x 不支持 Vue 3。根据 Vuetify 的任务任务列表为 Vue 3 重构所有组件:https ://www.notion.so/d107077314ca4d2896f0eeba49fe8a14?v=5cc7c08e9cc44021a7c86a20f189b0ba
虽然没有 Vuetify 3,但我会使用Vue 2.x
并Vuetify 2.x
安装Composition API 作为包/插件:
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'
请注意此方法的局限性。
Vuetify 目前与 Vue 3 不兼容。
鉴于 Vue 3 中的重大更改和实现差异的数量,需要重写整个库。
截至 2021 年 1 月,他们的目标是在 2021 年第 1 季度发布 alpha 版本,但普通用户不应该期望在年底之前看到发布版本,甚至可能在 2022 年初。
在此之前,还有其他与 Vue 3 兼容的替代方案,例如Prime Vue。我相信他们有可以连接的 Material Design 主题和相当数量的组件(尽管在 v-app 风格的功能协调方面略有不足)。
您可以尝试使用 vuetify 的 alpha 的 vue 3 https://next.vuetifyjs.com/