吐槽前段时间接触QuasarFramework，用了两周。刚开始使用Quasar的时候，因为时间关系，没有系统的看完所有的文档。我只是根据UI设计的效果图搜索类似的组件，然后进行改造。刚开始的时候，真的有种云遮雾罩的感觉，整个人都懵了。看着文档，各种组件的API的解释和例子，用起来总觉得怪怪的。QuasarCLI安装和项目创建废话不多说，下面开始记录学习和使用Quasar的过程。GettingStarted-PickaQuasarFlavour，从文档中可以看到，Quasar有3种使用方式：UMD/StandaloneQuasarCLIVueCLI3plugin我选择QuasarCLI安装，确认我的Node>=10andNPM>=5个版本满足要求，直接按照文档，执行：npminstall-g@quasar/cli然后，使用QuasarCLI创建工程文件夹：quasarcreatedemo值得一提的是上图中的选项，选择auto后import，是在/quasar.conf中添加的.js，components和directives引用，不需要自己添加，但是plugins还是需要自己添加，如下图：这里，如何配置Quasar附带的自定义Vue指令或组件或插件，请查看：使用Quasar指令，使用Quasar组件，使用Quasar插件quasardev如果您在package.json中添加了其他包依赖项，则需要使用npminstall安装依赖项冷杉st然后，在vscode的终端运行：quasardev在执行quasardev时，会报错：这时候可以执行：Set-ExecutionPolicy-ExecutionPolicyBypass-ScopeProcess这是不是全局设置，所以每次关闭项目并再次打开时，您可能需要重新运行它。之后就可以使用quasardev启动本地正常运行了。顺便说一句ConfigureVSCode文档中的vscode的配置在开发quasar的时候很有用，避免了很多看起来很奇怪的错误。配置quasar.conf.jsWebpackdevServer选项在开发过程中，需要配置后端接口服务器：quasarbuild:examplesettingenvfordev/build根据开发或生产构建类型，配置访问地址：stylelayoutQuasar提供了一个段落字体：Typography，里面包含了一些字体格式的样式类，可以直接使用。Quasar提供多种开箱即用的颜色：ColorPalette。在布局方面，可以直接使用QLayout组件来管理整个窗口，用导航栏或抽屉等元素包裹页面内容。可以直接显示施工图，导出代码，非常方便。在Quasar中，可以直接使用一些CSS类来实现常用的功能，例如：CSSVisibility、CSSPositioningClasses、CSSShadows等。Quasar提供了很多CSS类来帮助你轻松使用Flexbox构建UI。具有更灵活的行列网格布局。详情请参考文档：Flexbox文档介绍QuasarFrameworkGettingStarted-PickaQuasarFlavourUsingQuasarDirectivesUsingQuasarComponentsUsingQuasarPlugins
