Quasar的配置文件說明

Quasar的/quasar.conf.js文件配置說明

屬性                類型                 描述
css	 	    		Array 	     		來自/src/css/的全局CSS/Stylus/…文件,默認包含的主題文件除外。
preFetch			Boolean	     		啓用PreFetch功能.
extras	    		Array	     		從@quasar/extras包中導入什麼內容。 例: [‘material-icons’, ‘roboto-font’, ‘ionicons-v4’]
vendor	    		Object	     		向vendor塊添加/刪除文件/第三方庫: { add: [], remove: [] }.
supportIE			Boolean	     		增加IE11+支持.
htmlVariables		Object		 		添加可在index.template.html中使用的變量。
framework			Object/String		導入哪個Quasar組件/指令/插件,選擇哪個Quasar語言包,使用Quasar組件的哪個Quasar圖標集。
animations			Object/String		導入哪個CSS動畫。 例: [‘bounceInLeft’, ‘bounceOutRight’]
devServer			Object				Webpack開發服務器選項。 根據您使用的Quasar模式覆蓋某些屬性,以確保正確的配置。注意:如果您要代理開發服務器(即使用雲IDE),請將“public”設置爲你的公共應用程序URL。
build				Object				構建配置。
sourceFiles			Object				更改應用部分的默認名稱.
cordova				Object				Cordova特定配置。
capacitor			Object				Quasar CLI Capacitor特定配置。
pwa					Object				PWA特定配置。
ssr					Object				SSR特定配置.
electron			Object				Electron特定配置。

屬性:framework

告訴CLI要導入的Quasar組件/指令/插件,要使用的Quasar I18n語言包,用於Quasar組件的圖標集等等。

// quasar.conf.js
return {
  // a list with all options (all are optional)
  framework: {
    components: ['QBtn', 'QIcon' /* ... */],
    directives: ['TouchSwipe' /* ... */],
    plugins: ['Notify' /* ... */],

    // Quasar config
    // You'll see this mentioned for components/directives/plugins which use it
    config: { /* ... */ },

    iconSet: 'fontawesome', // requires icon library to be specified in "extras" section too,
    lang: 'de', // Tell Quasar which language pack to use for its own components

    cssAddon: true // Adds the flex responsive++ CSS classes (noticeable bump in footprint)
  }
}

自動導入功能

您還可以通過framework:{all}屬性將Quasar CLI配置爲自動導入正在使用的Quasar組件和指令:

// quasar.conf.js
framework: {
  // Possible values for "all":
  // * 'auto' - Auto-import needed Quasar components & directives
  //            (slightly higher compile time; next to minimum bundle size; most convenient)
  // * false  - Manually specify what to import
  //            (fastest compile time; minimum bundle size; most tedious)
  // * true   - Import everything from Quasar
  //            (not treeshaking Quasar; biggest bundle size; convenient)
  all: 'auto',
如果您設置all: 'auto', 那麼Quasar將自動爲您導入組件和指令。 編譯時間將略有增加,但是您無需在quasar.conf.js中指定組件和指令。 請注意,仍需要指定Quasar插件。

從@quasar/app v1.1.2(以及quasar v1.1.3 +)開始,使用自動導入功能時,您還可以配置編寫組件的方式:

// quasar.conf.js
framework: {
  all: 'auto',
  autoImportComponentCase: 'pascal' // or 'kebab' (default) or 'combined'
發佈了93 篇原創文章 · 獲贊 82 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章