Vite 的 Quasar 外掛 | Quasar 框架

Vite 的 Quasar 外掛程式

如果您想將 Quasar 嵌入到您現有的 Vite 專案中，請依照本指南安裝和使用 @quasar/vite-plugin。我們的 Vite 外掛程式開箱即用，為 Quasar 提供 tree-shaking 功能，並整合 Quasar Sass 變數。

警告！前方有限制

您確定您已正確進入此頁面嗎？本頁面將教您如何使用我們的 Vite 外掛程式，但它與底層功能齊全的 Quasar CLI with Vite 不同。
我們的 Vite 外掛程式不支援 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 關於 scaffolding 的指南 Vite 專案。**當詢問時，請選擇「Vue」。**

安裝

導覽至您的 Vite 專案資料夾並安裝必要的套件。

提示

請注意，@quasar/extras 是選用的。
此外，如果您想使用 Quasar Sass/SCSS 變數，則需要根據您的 Quasar UI 版本新增 sass 依賴項
- 對於 Quasar >= v2.14，請新增 sass@^1.33.0
- 對於 Quasar <= v2.13，請新增 sass@1.32.12（**請注意精確的固定版本**）

Yarn

NPM

PNPM

Bun

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

使用 Quasar

我們建置了一個配置器，以協助您盡快開始使用

Roboto 字體

Roboto extended 字體

Animate.css 的動畫

kebab

自動匯入元件案例

Quasar Sass/SCSS 變數

Quasar Config Object

英文 (美國)

Quasar 語言包

Material (webfont)

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://vite.dev.org.tw/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 支援頁面並依照指示操作。

發現錯誤？在瀏覽器中編輯此頁面

1. 簡介

2. 建立 Vite 專案

3. 安裝

4. 使用 Quasar

5. @quasar/vite-plugin 選項

6. RTL 支援