Quasar Vite 插件

如果您想将 Quasar 集成到现有的 Vite 项目中，请按照本指南安装和使用 @quasar/vite-plugin。该 Vite 插件开箱即用地提供了 Quasar 的 Tree-Shaking 功能以及 Quasar Sass 变量的集成。

注意限制：

请确认您来对了地方。本页面介绍的是 Vite 插件的用法，它与底层集成了 Vite 的完整 Quasar CLI 并不相同。
Vite 插件不支持 SSR 构建（SSR 只能通过 Quasar CLI with Vite 实现）。

Vite 的跨平台支持由社区插件提供。这些插件与 Quasar 的集成度不如 Quasar CLI 那么紧密，可能会遇到问题。因此，为了获得最佳开发体验，我们推荐使用 Quasar CLI with Vite。

创建 Vite 项目

Yarn

NPM

PNPM

Bun

$ yarn create vite my-vue-app --template vue

完整的官方指南请访问 Vite 项目搭建指南。询问时请选择 “Vue”。

安装

进入 Vite 项目目录，安装必要的依赖包。

TIP

@quasar/extras 是可选的。
如果要使用 Quasar 的 Sass/SCSS 变量，需要根据 Quasar UI 的版本添加 Sass 依赖：
- Quasar >= v2.14：添加 sass-embedded@^1.93.2
- Quasar <= v2.13：添加 sass@1.32.12（注意这是精确固定的版本号） :::

Yarn

NPM

PNPM

Bun

$ yarn add quasar @quasar/extras
$ yarn add --dev @quasar/vite-plugin sass-embedded@^1.93.2

使用 Quasar

我们提供了一个配置器，帮助您快速上手：

Roboto font

Roboto font extended

Animations from Animate.css

Auto-import component case

kebab

Quasar Sass/SCSS variables

Quasar Config Object

Quasar Language Pack

English (US)

Quasar Icon Set

Material (webfont)

// FILE: main.js

import { createApp } from 'vue'
import { Quasar } from 'quasar'

// Import icon libraries
import '@quasar/extras/material-icons/material-icons.css'

// Import Quasar css
import 'quasar/src/css/index.sass'

// Assumes your root component is App.vue
// and placed in same folder as main.js
import App from './App.vue'

const myApp = createApp(App)

myApp.use(Quasar, {
  plugins: {}, // import Quasar plugins and add here
})

// Assumes you have a <div id="app"></div> in your index.html
myApp.mount('#app')

// FILE: vite.config.js

import { fileURLToPath } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { quasar, transformAssetUrls } from '@quasar/vite-plugin'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue({
      template: { transformAssetUrls }
    }),

    // @quasar/plugin-vite options list:
    // https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts
    quasar({
      sassVariables: fileURLToPath(
        new URL('./src/quasar-variables.sass', import.meta.url)
      )
    })
  ]
})

// FILE (create it): src/quasar-variables.sass

$primary   : #1976D2
$secondary : #26A69A
$accent    : #9C27B0

$dark      : #1D1D1D

$positive  : #21BA45
$negative  : #C10015
$info      : #31CCEC
$warning   : #F2C037

@quasar/vite-plugin 配置选项

完整的配置选项列表请查看这里。

RTL 支持

如需启用 RTL（从右到左）布局，请参阅 RTL 支持页面并按照说明操作。

发现错误？在浏览器中编辑此页

1. Introduction

2. 创建 Vite 项目

3. 安装

4. 使用 Quasar

5. @quasar/vite-plugin 配置选项

6. RTL 支持