Quasar指南组件文档地址:http://v0-16.quasarchs.com/guide/app-quasar.conf.js.html#devServer属性
执行玩创建项目目录的命令后,我们就会得到一个像下面一样结构的项目,其中的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,官网给出的说法是
进入到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来进行,有了这个全局的通信机制,各个组件的通信就显得尤其简单了,组件之间互相传值、互相调用方法就显得不是那么复杂了
本文学习摘自白石桥的锁匠的掘金博客