如果你想将 Quasar 嵌入到你现有的 Vite 项目中，请按照本指南安装和使用 @quasar/vite-plugin。我们的 Vite 插件开箱即用，为 Quasar 提供 tree-shaking 功能，并支持 Quasar Sass 变量集成。

¥If you want to embed Quasar into your existing Vite project then follow this guide to install and use the @quasar/vite-plugin. What our Vite plugin offers out of the box is tree-shaking for Quasar and also Quasar Sass variables integration.

Vite 的跨平台支持由社区插件提供。这些应用与 Quasar 的集成不如 Quasar CLI 紧密，因此可能存在问题。这就是为什么为了获得最佳开发者体验，我们建议使用 Quasar CLI 与 Vite 结合使用。

¥Cross-platform support with Vite is handled by community plugins. These are not tightly integrated with Quasar as with Quasar CLI and may have issues. This is why for the best developer experience we recommend using Quasar CLI with Vite instead.

创建 Vite 项目(Creating a Vite project)

¥Creating a Vite project

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

有关官方（完整）指南，请访问 Vite 脚手架指南 a Vite 项目。当系统提示时，请选择 “Vue”。

¥For the official (and full) guide, please visit the Vite guide for scaffolding a Vite project. Select “Vue” when asked.

安装(Installation)

¥Installation

找到你的 Vite 项目文件夹并安装必要的软件包。

¥Navigate to your Vite project folder and install the necessary packages.

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

使用 Quasar(Using Quasar)

¥Using Quasar

我们构建了一个配置器来帮助你尽快上手：

¥We have built a configurator to help you get started as quickly as possible:

// 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 options(@quasar/vite-plugin options)

完整的选项列表可在 此处 中找到。

¥The full list of options can be found here.

RTL 支持(RTL support)

¥RTL support

要启用此功能，请查看我们的 RTL 支持 页面并按照说明操作。

¥For enabling, please check out our RTL Support page and follow the instructions.