如果你想把Quasar嵌入到你现有的Vite项目中，那么请按照这个指南来安装和使用@quasar/vit-plugin。 我们的Vite插件所提供的是Quasar的tree-shaking和Quasar Sass变量的集成。

Vite的跨平台支持是由社区插件处理的。这些插件没有像Quasar CLI那样与Quasar紧密结合，可能会有问题。这就是为什么我们建议使用Quasar CLI with Vite，以获得最佳的开发者体验。

创建一个Vite项目

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

# or npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue

获取官方（和完整的）指南，请访问[Vite脚手架指南]（https://vitejs.dev/guide/#scaffolding-your-first-vite-project）的一个Vite项目。在询问时选择"Vue"。

安装

导航到你的Vite项目文件夹，安装必要的软件包。

$ yarn add quasar @quasar/extras
$ yarn add -D @quasar/vite-plugin sass@1.32.12

# or
$ npm install quasar @quasar/extras
$ npm install -D @quasar/vite-plugin sass@1.32.12

# or
$ pnpm add quasar @quasar/extras # experimental support
$ pnpm add -D @quasar/vite-plugin sass@1.32.12 # experimental support

使用Quasar

我们已经建立了一个配置器，以帮助你尽快开始。

// 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 { 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({
      sassVariables: 'src/quasar-variables.sass'
    })
  ]
})

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

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

$dark      : #1D1D1D

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

RTL支持

如需启用，请查看我们的RTL支持页面，并按照指示操作。

为生产构建时的警告

当为生产构建时，你可能会注意到下面的警告。你可以安全地忽略它。这是一个已知的Vite问题。

warnings when minifying css:
 > <stdin>:32:0: warning: "@charset" must be the first rule in the file
    32 │ @charset "UTF-8";
       ╵ ~~~~~~~~
   <stdin>:9:0: note: This rule cannot come before a "@charset" rule
     9 │ .material-icons {