quasar 參考文檔

目錄

• 1，開篇之義:
• 2，快速開始
• 3，應用手冊
  • 3.1，目錄結構
  • 3.2，路由
  • 3.3，配置兼容性
  • 3.4，API代理開發
  • 3.5，啟動文件

1，開篇之義:

當需要做某些框架的時候，使用到了Quasar。想要快速的了解與應用參考可查看本文檔。
中文文檔鏈接：https://quasar.dev/start/upgrade-guide

為什么選擇Quasar？

優點		其它
開箱即用的提供給網站和應用程序的最先進的UI（遵循《Material指南》）		基於Vue.js
對每種構建模式 SPA、SSR、PWA、移動應用程序、桌面應用程序和瀏覽器擴展 提供了一流的支持		SPAs (單頁應用) SSR (服務器端渲染的應用) (+可選的PWA客戶端接管) PWA（漸進式網頁應用） BEX (瀏覽器擴展) 通過Cordova或Capacitor構建移動APP（Android、iOS…） 多平台桌面應用（使用Electron）
注重性能的框架
自動tree shaking
社區支持
處理整個開發經驗（甚至包括創建應用程序的圖標和啟動畫面）

2，快速開始

三種安裝方式：

方式	操作	備注
通過CDN嵌入現有項目，漸進式集成	https://quasar.dev/start/umd
Vue CLI插件與Quasar一起使用	$ vue --version #安裝 Vue CLI (v4.5.11 +) $ npm install -g @vue/cli $ vue create my-app $ cd my-app $ yarn add --dev vue-cli-plugin-quasar@3 $ vue invoke quasar
Quasar CLI(推薦)	# Node.js >=12.22.1 is required. $ yarn global add @quasar/cli # or $ npm install -g @quasar/cli

3，應用手冊

3.1，目錄結構

├── public/                  # 純靜態資源（直接復制）
├── src/
│   ├── assets/              # 動態資源（由webpack處理）
│   ├── components/          # 用於頁面和布局的.vue組件
│   ├── css/                 # CSS/Stylus/Sass/...文件
|   |   ├── app.styl
|   │   └── quasar.variables.styl # 供您調整的Quasar Stylus變量
│   ├── layouts/             # 布局 .vue 文件
│   ├── pages/               # 頁面 .vue 文件
│   ├── boot/                # 啟動文件 (應用初始化代碼) 
│   ├── router/              # Vue路由
|   |   ├── index.js         # Vue路由定義
|   │   └── routes.js        # App路由定義
│   ├── store/               # Vuex Store
|   |   ├── index.js         # Vuex Store 定義
|   │   ├── <folder>         # Vuex Store 模塊...
|   │   └── <folder>         # Vuex Store 模塊...
│   ├── App.vue              # APP的根Vue組件
│   └── index.template.html  # index.html模板
├── src-ssr/                 # SSR特定代碼(就像生產環境的Node網頁服務器)
├── src-pwa/                 # PWA特定代碼（如Service Worker）
├── src-cordova/             # Cordova生成的文件夾用於創建移動APP
├── src-electron/            # Electron特定代碼（如"main"線程)
├── src-bex/                 # BEX（瀏覽器擴展）特定代碼（如"main"線程)
├── dist/                    # 生產版本代碼，用於部署
│   ├── spa/                 # 構建SPA的例子
│   ├── ssr/                 # 構建SSR的例子
│   ├── electron/            # 構建Electron的例子
│   └── ....
├── quasar.conf.js           # Quasar App配置文件
├── babel.config.js          # Babeljs配置
├── .editorconfig            # editor配置
├── .eslintignore            # ESlint忽略路徑
├── .eslintrc.js             # ESlint配置
├── .postcssrc.js            # PostCSS配置
├── .stylintrc               # Stylus lint配置
├── .gitignore               # GIT忽略路徑
├── package.json             # npm腳本和依賴項
└── README.md                # 您的網站/應用程序的自述文件

3.1.1，常用配置文件：
quasar.conf.js

module.exports = function (ctx) { // can be async too (@quasar/app v2.1+)
  console.log(ctx)

  // 輸出到控制台的例子:
  {
    dev: true,
    prod: false,
    mode: { spa: true },
    modeName: 'spa',
    target: {},
    targetName: undefined,
    arch: {},
    archName: undefined,
    debug: undefined
  }

  // 根據這些參數上下文將會被創建
  // 當你運行"quasar dev"或"quasar build"時

  // 只為PWA模式指定字體
  extras: [
    ctx.mode.pwa // we're adding only if working on a PWA
      ? 'roboto-font'
      : null
  ]

  // 可以使用一個全局CSS文件用於SPA模式
  css: [
    ctx.mode.spa ? 'app-spa.styl' : null, // looks for /src/css/app-spa.styl
    ctx.mode.cordova ? 'app-cordova.styl' : null  // looks for /src/css/app-cordova.styl
  ]

  // 可以將開發服務器配置為在端口8000上運行SPA模式，在端口9000上運行PWA模式或在端口9090上運行其他模式：
  devServer: {
    port: ctx.mode.spa
      ? 8000
      : (ctx.mode.pwa ? 9000 : 9090)
  }

  // 從“@quasar/app”v2.1+開始，您現在可以在返回Quasar配置之前執行異步工作：
  // module.exports = async function (ctx) {
  const data = await someAsyncFunction()
  return {
    // ... use "data"
  }
  // }或者
  // module.exports = function (ctx) {
  return new Promise(resolve => {
    // some async work then:
    // resolve() with the quasar config
    resolve({
      //
    })
  })
  // }

}

---

3.1.2，常用命令：

環境	命令	環境	命令	描述
開發	$ quasar dev	生產	$ quasar build	運行開發服務器(使用默認主題)
開發	$ quasar dev -p 9090	生產	--	運行在特定端口
開發	$ quasar dev -m 【ssr\pwa】	生產	$ quasar build -m 【ssr\pwa】	SSR or PWA 應用
開發	$ quasar dev -m cordova -T [android/ios]	生產	$ quasar build -m cordova -T [android	ios]
開發	$ quasar dev -m [android/ios]	生產	$ quasar build -m [android	ios]
開發	$ quasar dev -m electron	生產	$ quasar build -m electron	Electron應用
開發	$ quasar dev -m ios -- some params --and options --here $ quasar dev -m electron -- --no-sandbox --disable-setuid-sandbox	生產	$ quasar build -m ios -- some params --and options --here	將額外的參數和/或選項傳遞給 底層“cordova”或“electron”可執行文件：

3.2，路由

Quasar項目包含一個/src/router文件夾。 這包含您的網站/應用程序的路由配置：

“/src/router/index.js” 保存Vue路由初始化代碼
“/src/router/routes.js” 保存你的網站/應用的路由

3.3，配置兼容性

在 package.json 支持 IE 11:

"browserslist": [
  "ie 11", // <<-- add it
  ...
]

3.4，API代理開發

編輯/quasar.conf.js中的devServer.proxy。 有關詳細用法，請參閱Webpack Dev Server Proxy文檔。 但是這里有一個簡單的例子：

devServer: {
  proxy: {
    // 將所有以/api開頭的請求代理到jsonplaceholder
    '/api': {
      target: 'http://some.api.target.com:7070',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

3.5，啟動文件

啟動文件是一個簡單的可以選擇導出函數的JavaScript文件。 當啟動應用程序時，Quasar將調用導出的函數，並將具有以下屬性的一個對象傳遞給該函數： |

export default ({ app, router, store, Vue }) => {
  // something to do
}

• app 根組件通過Vue實例化的對象
• router 來自’src/router/index.js’的Vue路由器實例
• store 應用Vuex存儲的實例 - 只有當您的項目使用Vuex（您有src/store）時才會傳遞store
• Vue 和import Vue from 'vue'一樣，它在那里是為了方便
• ssrContext 如果為SSR構建，則僅在服務器端可用
• urlPath (@quasar/app 1.0.7+) URL的路徑名（路徑+搜索）部分；在客戶端（僅在客戶端），它也包含哈希值。
• publicPath (@quasar/app 2+) 配置的公共路徑。
• redirect (@quasar/app 1.0.7+) 重定向到另一個URL的調用函數。接受字符串（URL路徑）或Vue路由器位置對象。

WARNING
永遠不要在你的啟動文件中調用new Vue(App)，因為這會完全破壞你的網站/應用程序。 您不需要它，因為Quasar CLI負責使用Vue實例化您的應用程序。