【国外框架】—— quasar项目代码结构分析

Quasar指南组件文档地址：http://v0-16.quasarchs.com/guide/app-quasar.conf.js.html#devServer属性

quasar-play 官方Demo地址：https://github.com/quasarframework/quasar-play/tree/master

---

 执行玩创建项目目录的命令后，我们就会得到一个像下面一样结构的项目，其中的src就是存放我们业务逻辑代码的地方，也是多端复用最为关键的部分。但是这里需要插一句，就是Quasar的src里居然没有实例化vue对象的那个main.js，可能是Quasar故意这样做的，因为像axios，vuex这些，初始化项目是我们就可以直接选上了，不用自己后续安装，所以如果我们还想自行往Vue实例上绑定对象，那就只能在app.vue这个根组件上动手了。

[ '|-- quasar',
  '    |-- .editorconfig',
  '    |-- .eslintignore',
  '    |-- .eslintrc.js',
  '    |-- .gitignore',
  '    |-- .postcssrc.js',
  '    |-- .stylintrc',
  '    |-- babel.config.js',
  '    |-- package.json',
  '    |-- quasar.conf.js',
  '    |-- README.md',
  '    |-- yarn.lock',
  '    |-- src',
  '        |-- App.vue',
  '        |-- index.template.html',
  '        |-- assets',
  '        |   |-- quasar-logo-full.svg',
  '        |   |-- sad.svg',
  '        |-- boot',
  '        |   |-- .gitkeep',
  '        |   |-- axios.js',
  '        |-- components',
  '        |   |-- .gitkeep',
  '        |-- css',
  '        |   |-- app.styl',
  '        |   |-- quasar.variables.styl',
  '        |-- layouts',
  '        |   |-- MyLayout.vue',
  '        |-- pages',
  '        |   |-- Error404.vue',
  '        |   |-- Index.vue',
  '        |-- router',
  '        |   |-- index.js',
  '        |   |-- routes.js',
  '        |-- statics',
  '        |   |-- app-logo-128x128.png',
  '        |   |-- icons',
  '        |       |-- apple-icon-120x120.png',
  '        |       |-- apple-icon-152x152.png',
  '        |       |-- apple-icon-167x167.png',
  '        |       |-- apple-icon-180x180.png',
  '        |       |-- favicon-16x16.png',
  '        |       |-- favicon-32x32.png',
  '        |       |-- favicon-96x96.png',
  '        |       |-- favicon.ico',
  '        |       |-- icon-128x128.png',
  '        |       |-- icon-192x192.png',
  '        |       |-- icon-256x256.png',
  '        |       |-- icon-384x384.png',
  '        |       |-- icon-512x512.png',
  '        |       |-- ms-icon-144x144.png',
  '        |       |-- safari-pinned-tab.svg',
  '        |-- store',
  '            |-- index.js',
  '            |-- module-example',
  '                |-- actions.js',
  '                |-- getters.js',
  '                |-- index.js',
  '                |-- mutations.js',
  '                |-- state.js',
  '' ]

       当然，除了src文件夹，外部的babel.config.js和quasar.conf.js（注意是conf不是config）很多时候也很重要，毕竟打包的配置就是要靠这两个文件。

       进入到src文件夹内部，正式上面显示的结构，和vue-cli生成的项目基本没什么区别。这个要重点说下，其中的boot是axios放的地方，也就是网络请求部分，css文件默认用的stylus，但是我们也能换成我们熟悉的sass，官网给出的说法是

 

 

但是，平凡当中却孕育者伟大，正如Quasar官网所说，当使用Quasar时，你不需要像Hammerjs，Momentjs或Bootstrap这样的额外重型库。它拥有这些功能，而且体积很小！对于Bootstrap,想必大家都已经很熟悉了，但是Hammer.js和Moment.js，这两个一听就是js库

Hammer.js

1、用于检测触摸手势的 JavaScript库
2、添加了对触摸手势的支持并移除了点击的300ms
3、还支持最常见的单点和多点触摸手势，并且可以完全扩展以添加自定义手势

Moment.js

Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。

 

所以说，Quasar相比我们之前的vue项目，帮我们省了很多引入三方包的操作，而这些用起来也很简单，直接

import { date } from 'quasar'
const { addToDate } = date
let newDate = addToDate(new Date(), { days: 7, month: 1 })

Quasar设定的组件之间有个全局事件总线的通信机制，没有新建vue实例，而是直接使用this.$root来进行，有了这个全局的通信机制，各个组件的通信就显得尤其简单了，组件之间互相传值、互相调用方法就显得不是那么复杂了　　

---

本文学习摘自白石桥的锁匠的掘金博客