Vue3组件使用v-*标签无法正常渲染是否需要安装额外依赖库？

是的，你需要额外安装依赖库。你代码中所有以v-开头的标签都是Vuetify3 组件库提供的UI组件，当前你列出的项目依赖中没有引入Vuetify3，因此这些自定义组件无法被正常解析渲染，浏览器只会输出标签内部的纯文本内容，也就是你看到的"Sales"。

你可以按照以下步骤完成配置：

• 第一步：安装Vuetify3及配套图标依赖
  执行对应包管理器的安装命令：

  # npm
  npm install vuetify@^3.3.0 @mdi/font
  # yarn
  yarn add vuetify@^3.3.0 @mdi/font
  # pnpm
  pnpm install vuetify@^3.3.0 @mdi/font
  

• 第二步：在项目入口文件（通常为main.js/main.ts）中全局注册Vuetify
  参考配置代码如下：

  import { createApp } from 'vue'
  import App from './App.vue'
  // 引入Vuetify全局样式
  import 'vuetify/styles'
  // 引入Vuetify核心构造函数、组件、指令
  import { createVuetify } from 'vuetify'
  import * as components from 'vuetify/components'
  import * as directives from 'vuetify/directives'
  // 引入Material Design图标样式（可选，用到Vuetify图标时需要）
  import '@mdi/font/css/materialdesignicons.css'
  
  const vuetify = createVuetify({
    components,
    directives,
  })
  
  // 将Vuetify挂载到Vue实例
  createApp(App).use(vuetify).mount('#app')
  

配置完成后重新启动开发服务，组件即可正常渲染。

内容的提问来源于stack exchange，提问作者react1