vue3+vite+vuetify3.0.0 alpha.0 安装踩坑笔记

前言

在最近想用尤大推荐得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')

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