前言

在最近想用尤大推荐得vuetify 自己写个小项目历练一下，结果没想到卡在了安装这一块，因为选择了vue3，但是官方文档最新的稳定版不支持vue3， 我就去vuetify 官网找资料，找到测试版的vuetify3.0.0-alpha.0 说这个测试版本支持vue，尽管是测试版，我想着以后升级也方便，普通的功能页足够我使用了，就选择了这个版本。 具体版本如下

"vue": "~3.2.6",
    "vuetify": "^3.0.0-alpha.0"
	"vite": "^2.5.2",

安装过程

依照官网测试版的安装顺序，提供了vue/cli 和 vite 两种方式， 因为他推荐vite ，所以我也选择了vite的方式，如下（vuetify官网抄来的）： （vuecli 自行去官网查看）

# npm 6.x
npm init @vitejs/app my-app --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-app -- --template vue

# yarn
yarn create @vitejs/app my-app --template vue

接下来进入您的项目目录，添加 Vuetify：

cd my-app
vue add vuetify

一旦出现提示, 选定 Preview (Vuetify 3 + Vite):

? Choose a preset: (Use arrow keys)
  Default (recommended)
> Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  V3 (alpha)
  Configure (advanced)

官网的main.js 照搬过来

import vuetify/styles
import {
          
    createApp } from vue
import {
          
    createVuetify } from vuetify
import App from ./App.vue

const app = createApp(App)
const vuetify = createVuetify(...) // Replaces new Vuetify(...)

app.use(vuetify)

app.mount(#app)

安装成功，开始运行出错

启动项目 第一个报错来了 我跟着目录找下去，发现只有个index.d.ts 发现只要改成 然后我们把main.js修改为如下。

import vuetify/styles
import {
          
    createApp } from vue
import  createVuetify  from ./plugins/vuetify
import App from ./App.vue

const app = createApp(App)
const Vuetify = createVuetify 

app.use(Vuetify)

app.mount(#app)

重启项目，就可以看到界面了