Quasar Vite 插件模式
把 Quasar 嵌入现有的 Vite 项目，要根据下述指引安装并使用 @quasar/vite-plugin。Quasar 的 Vite 插件提供了开箱即用的摇树(Tree-Shaking)功能，并整合了 Quasar 的 Sass 变量。
警告：请三思而后行
- 您确定要选择这种模式吗？本页面中介绍的只是 Vite 插件，该插件与我们完备的 Quasar CLI + Vite 模式其实并不一样。
- Vite 插件不支持 SSR，且 SSR 只能通过 Quasar CLI + Vite 模式实现。
社区里的插件为 Vite 提供了跨平台支持，但这些插件与 Quasar CLI 的整合程度不高，且存在一些问题。因此，建议大家使用 Quasar CLI with Vite，这样才能获得最佳的开发体验。
创建 Vite 项目
# yarn
$ yarn create vite my-vue-app --template vue
# 或 npm 6.x
npm init vite@latest my-vue-app --template vue
# npm 7+，需要额外添加两条横线
npm init vite@latest my-vue-app -- --template vue
# pnpm
pnpm create vite my-vue-app -- --template vue
Vite 官方指南，详见 Vite 官网，了解如何搭建 Vite 项目。 选择框架时，要选择 “Vue”。
安装
进入 Vite 项目目录，安装所需的依赖包。
提示
- 注意，
@quasar/extras是可选的。 - 此外，如果你想使用 Quasar Sass/SCSS 变量，你需要添加
sass依赖，根据你使用的 Quasar UI 版本来选择：- 对于 Quasar >= v2.14，请添加
sass@^1.33.0 - 对于 Quasar <= v2.13，请添加
sass@1.32.12
- 对于 Quasar >= v2.14，请添加
（请注意确切的固定版本号）
$ yarn add quasar @quasar/extras
$ yarn add -D @quasar/vite-plugin sass@^1.33.0
# 或
$ npm install quasar @quasar/extras
$ npm install -D @quasar/vite-plugin sass@^1.33.0
# 或
$ pnpm add quasar @quasar/extras
$ pnpm add -D @quasar/vite-plugin sass@^1.33.0
使用 Quasar
我们创建了一个配置器，方便您尽快启动 Quasar 项目。
Roboto font
Roboto font extended
Animations from Animate.css
Material Icons
Material Icons (Outlined)
Material Icons (Round)
Material Icons (Sharp)
MDI v6
Fontawesome v6
Fontawesome v5
Ionicons v4
Eva Icons
Themify
Line Awesome
Bootstrap Icons
Quasar Sass/SCSS variables
Quasar Config Object
// 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/plugin-vite options list:
// https://github.com/quasarframework/quasar/blob/dev/vite-plugin/index.d.ts
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
@quasar/vite-plugin 配置项
完整的配置项列表参考这里.
RTL 支持
开启 RTL (右向左) 的排版方式，请参阅 RTL 支持。
构建生产环境时的警告
构建生产环境时，您可能会看到如下警告。请放心忽略此警告信息，Vite 开发团队已经知道这个 issue 了。
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 {