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')

安装成功,开始运行出错

启动项目 第一个报错来了
报错1
我跟着目录找下去,发现只有个index.d.ts
发现只要改成
修改2
然后我们把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')

重启项目,就可以看到界面了
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐