quasar 参考文档
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实例化您的应用程序。
![]({"src": "img/720x200.gif", "width" : 720, "height" : 200})
