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实例化您的应用程序。