如何不使用CLI安装Quasar，搭配Vue与Vitest并完成配置及测试

1. 初始化项目结构 #

先创建项目目录并初始化npm：

mkdir quasar-vue-vitest && cd quasar-vue-vitest
npm init -y

2. 安装核心依赖 #

选择Vue 3 + Quasar v2的兼容组合，同时安装Vitest及测试相关工具：

# 生产依赖
npm install vue@3 quasar@2
# 开发依赖
npm install -D vitest @vue/test-utils@2 happy-dom @quasar/vite-plugin css-loader style-loader

注：happy-dom可替换为jsdom，按需选择测试环境。

3. 配置Vitest #

在项目根目录创建vitest.config.js，处理Vue和Quasar的插件集成：

import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),
    quasar({
      sassVariables: 'src/quasar-variables.sass' // 可选：自定义Quasar样式变量文件
    })
  ],
  test: {
    environment: 'happy-dom',
    globals: true, // 全局使用test/expect，无需每次导入
    coverage: { // 可选：测试覆盖率配置
      provider: 'v8',
      reporter: ['text', 'html']
    }
  }
})

4. 搭建基础项目结构 #

创建必要的目录和文件：

quasar-vue-vitest/
├── src/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
│   └── quasar-variables.sass（可选）
├── tests/
│   └── components/
│       └── HelloWorld.spec.js
├── vitest.config.js
└── package.json

5. 编写组件与测试用例 #

示例组件src/components/HelloWorld.vue：

<template>
  <q-card>
    <q-card-section>
      <h1>{{ msg }}</h1>
    </q-card-section>
  </q-card>
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('Hello Quasar + Vue + Vitest!')
</script>

对应的测试文件tests/components/HelloWorld.spec.js：

import { mount } from '@vue/test-utils'
import HelloWorld from '../../src/components/HelloWorld.vue'
import { Quasar } from 'quasar'

test('渲染正确的文本内容', () => {
  const wrapper = mount(HelloWorld, {
    global: {
      plugins: [Quasar] // 必须注册Quasar插件，否则Quasar组件会报错
    }
  })
  expect(wrapper.find('h1').text()).toBe('Hello Quasar + Vue + Vitest!')
})

6. 添加运行脚本 #

修改package.json的scripts字段：

{
  "scripts": {
    "test": "vitest",
    "test:coverage": "vitest --coverage"
  }
}

7. 启动测试 #

执行命令运行测试：

npm test

常见问题解决 #

• Quasar组件未识别：测试时必须在global.plugins中注册Quasar，否则会出现"Unknown custom element"错误
• 样式加载失败：确保已安装css-loader和style-loader，Vitest会自动处理Quasar的样式文件
• 版本冲突：Vue 3必须搭配Quasar v2，@vue/test-utils需使用v2及以上版本

内容的提问来源于stack exchange，提问作者Laís Silva