Quasar基于vue的前端框架

一次编写，多端应用（非小程序）
开箱即用，基于webpack & Vue

指南

官方文档 v1.12.8 版本，国内文档久未更新，本文参考国内站点

蛮多人推荐 Quasar 的，github 星标也蛮多

而且目前的二级域名也很有意思v0-16

能做什么

响应式 Web
PWA/移动 app
桌面应用

优势

开箱即用，默认配置集成（代码压缩、缓存清除、tree shaking、sourcemapping、热重载、代码分割和延迟加载、ES6 转译、i18n、代码检查、可访问性功能 and so on）
一次编写，多端部署
体积小
底层为 webpack
原生 ui 外观
文档简洁(真的吗，我不信。。。果然很全面，内置大量组件及布局，文档很长)
ie11+
组件丰富

[Stylus 语法]

简单的官网示例

<div id="q-app">
  <div class="q-ma-md">
    abcdefg
  </div>
  <q-btn
    class="q-ma-md"
    color="primary"
    icon="warning"
    label="notify"
    @click="notify"
  >
    <div class="q-ma-md">
      show version is {{version}}
    </div>
  </q-btn>
</div>

new Vue({
    el:'#q-app',
    data:(){
        return{
            version:Quasar.version
        }
    },
    methods:{
        notify:(){
            this.$q.notify('[show] version is'+this.$q.version);
        }
    }
})

虽然你现在还没有了解过 Quasar 语法，但是可以猜测到
Quasar 可以结合 Vue 一起使用，Vue 中默认挂载了$q 代表 Quasar

安装

三种方式，功能覆盖均不一致

UMD(CDN)
Quasar Cli
Vue cli

官方推荐用自带的 Cli

入门套件安装

node > 8
npm install -g vue-cli
npm install -g quasar-cli
quasar init <project>
quasar dev
quasar build

quasar.conf.js 配置文件

// 参数是对象，dev/build时创建，动态更改配置
module.exports = function(ctx){
    devServer:{
        // 开发服务器8000,pwa9000,其他9090
        prot:ctx.mode.spa ? 8000
            :(ctx.mode.pwa?9000:9090)
    }
    extras:[
        // ctx.theme.mat // 主题选择
    ]
    css:[
        ctx.mode.spa?'app-spa.styl':null, // 指向css/app-spa.sty
        ctx.mode.cordova?'app-cordova.styl':null // 指向css/app-cordova.styl
    ]
    build:{
        extendWebpack(cfg){
            // 扩展webpack功能加载器
            cfg.module.rules.push({
              test: /\.json$/,
              loader: 'json-loader'
            })
            // 别名
            cfg.resolve.alias = {
                 ...cfg.resolve.alias, // 添加现有的别名，
                // 添加你自己的别名
                myalias: path.resolve(__dirname, './src/somefolder'),
            }
        }
        // 方法二实现extendWebpack功能
        chainWebpack (chain) {
            chain.module.rule('json')
              .test(/\.json$/)
              .use('json-loader')
                .loader('json-loader')
            chain.resolve.alias
                .set('myalias', path.resolve(__dirname, './src/somefolder'))
        }
    }
    // supportIE,framework,animatins,sourceFiles等等配置类似webpack
}

路由/按需路由/资源处理/接口代理和 vue 一致

插件

根据 quasar 规则解剖插件，以配合 quasar 运行

vue 根组件被实例化之前运行，当启动应用程序时，Quasar 将调用导出的函数，并将具有以下属性的一个对象传递给该函数

1
2
3

export default ({ app, router, store, Vue }) => {
  // 根实例，路由，状态库，vue
};

插件用途比如：
挂载实例 this.$xx、安装插件 Vue.use()、路由 router.beforeEach、状态存储库 vuex-router-sync、请求库 vuex-router-sync

插件使用：

// 用Quasar CLI在/plugins/下生成一个新的插件
quasar new plugin <name>
// 配置文件写用到的插件
plugins: [
  '<name>' // 指向/src/plugins/<name>.js
]

Quasar 生命周期

1、Quasar 初始化（组件、插件、指令、图标等）
2、Quasar Extras 导入（字体、动画、图标等）
3、Quasar css 和 css 导入
4、App.vue 加载
5、Store 导入（如果使用了 Store）
6、Quasar 插件导入完成

7、在 Electron 模式下）Electron 被导入并注入 Vue 原型
- 在 Cordova 模式下）收听“deviceready”事件
- 存在 Boot 插件，执行应用程序 Boot 插件
- 不存在 Boot 插件，使用根组件实例化 Vue 并附加到 DOM

所以 boot 插件最终是用来 new Vue(app)的

vuex 模块

和 vue 一致，quasar 提供了命令行模板简化初始化操作
quasar new store <name>创建 module 模板，然后可以在主 store 里引用这个 modules

主题

要不怎么说是 UI 框架呢，最大的特点还是它的主题风格
/css/themes
基于 Stylus 的 Material 和 iOS

1
2
3

<style lang="stylus">
  // Quasar CLI提供提供的Webpack别名，解析Stylus的变量 @import '~variables'
</style>

9 个平台
mat	默认样式 Material 设计主题;Android 平台
ios	Apple 平台; iOS 主题
desktop	应用运行在一个桌面浏览器上
mobile	应用运行在一个手机浏览器上
cordova	Apache Cordova 包装的独立手机 App
electron	应用运行在 Electron 下
touch	触摸感知能力的平台
no-touch	没有触摸感知能力的平台
within-iframe	当整个网站都是在一个 IFRAME 标签下的时候

多端

文档中有多端打包的配置描述，这里也简述下

PWA

需要以下包含以下几点

渐进式-不强制用框架标准开发，生态按需使用
响应式-布局适配各端
离线访问-service workers 离线并更新保持新状态
app 风格-app 式的导航与交互
https 安全
可发现，mainifests 和 service worker 注册允许被搜索为应用程序
推送通知
桌面安装-桌面图标
可链接

Manifest 文件包含名称，图标和启动页
Service Worker 文件用来缓存资源，js 文件、请求数据

// 添加pwa模式
quasar mode -a pwa
// 开发模式
quasar dev -m pwa

mobile APP

Cordova 移动开发框架
既不是真正的原生移动 APP（因为所有的布局渲染都是通过 Web 视图而不是平台的本地 UI 框架完成的），
也不是纯粹的基于 Web 的 APP（它们不仅仅是 Web APP，因为可以包装成可分发的 APP, 并可访问本机设备 API）

// 安装cli
npm install -g cordova
// pc安装Android sdk 略

// 添加Cordova模式，生成一个文件夹
quasar mode -a cordova
// 开发模式
quasar dev -m cordova -T [android|ios]

Cordova 支持插件，配置获取原生设备信息
电池状态、相机、联系人、设备、设备运动、地理位置、媒体、媒体捕捉、网络信息、飞溅屏幕、振动、状态栏

插件执行依赖 Quasar 监听事件 deviceready 完成，然后挂载根 Vue 组件

pc Electron

桌面 GUI 应用程序，后端 NodeJs，前端 Chromium
每个 Electron 应用有 2 个线程，主线程处理窗口和启动初始化，渲染线程处理 UI

// 添加模式
quasar mode -a electron
// 开发模式
quasar dev -m electron -t [mat|ios]