已有Vue 3项目安装Quasar后如何使用组件，出现页面空白怎么解决？

核心错误原因 #

• 你安装的quasar-framework是适配Vue 2的Quasar v1版本，和Vue 3不兼容，这是页面空白的核心原因
• 不应该在单文件组件内执行Vue.use(Quasar)全局注册逻辑，该操作需要在项目入口文件中执行，且Vue 3不存在全局Vue对象，这行代码会直接抛出JS异常阻断渲染
• 用到的QBtn、QTooltip组件未正确导入，会触发组件未注册错误

具体修复步骤 #

1. 替换依赖包 #

先卸载错误的旧版本包，安装适配Vue 3的Quasar版本：

npm uninstall quasar-framework
npm install quasar @quasar/extras

2. 全局注册Quasar #

找到项目入口文件（通常为src/main.js），修改为如下逻辑：

import { createApp } from 'vue'
import App from './App.vue'
import Quasar from 'quasar'
// 导入你项目中的Quasar配置文件
import quasarUserOptions from './quasar-user-options'

const app = createApp(App)
// 全局注册Quasar
app.use(Quasar, quasarUserOptions)
app.mount('#app')

3. 修正单文件组件代码 #

删除AddEmployee.vue中错误的Quasar导入、注册逻辑，手动导入用到的Quasar组件：

<template>
    <Navbar/>
    <h1>Add Employee</h1>
    <q-btn color="primary" label="With Tooltip" class="q-mt-md">
      <q-tooltip class="bg-accent">I'm a tooltip</q-tooltip>
    </q-btn>
</template>

<script>
import Navbar from '../components/Navbar.vue'
// 从正确的包中导入用到的组件
import { QBtn, QTooltip } from 'quasar'

export default {
  components: {
    Navbar,
    QBtn,
    QTooltip
  }
}
</script>

<style>

</style>

可选优化（新手可跳过） #

如果不想每次使用Quasar组件都手动导入，可配置@quasar/vite-plugin（Vite项目）或vue-cli-plugin-quasar（Vue CLI项目）实现组件、插件的自动导入。

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