使用 Vuetify 创建新的 Vue 项目不起作用

Question

我一直在遵循本指南及其所有步骤：https://www.youtube.com/watch?v=To5XzHlTS_E。但是，当我运行“npm run dev”时，样式似乎未正确应用，请参见下图。即使我执行了视频中提到的所有步骤，为什么我的样式仍无法按预期工作？

Answer 1

YouTube 说明的问题在于

vue add vuetify

没有将

vuetify()

添加到 vite.config.js 中的插件数组中。

它应该看起来像这样：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
import vuetify from 'vite-plugin-vuetify'

export default defineConfig({
  plugins: [
    vue(), vuetify()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

这将解决该问题，但请注意，

vue

命令也不会安装最新版本的 Vuetify 3（该版本已经停止测试一年多了！）。按照最新的 Vuetify 文档 创建新项目不会出现任何这些问题。这里的教训是始终检查官方文档，因为 YouTube 视频很快就会过时。