Quasar-01-入门介绍

Quasar

标题：Quasar框架的优势概述

因为：

• 它基于Vue.js
• 您可以立即获得符合Material指南的最先进的UI，用于您的网站和应用程序
• 提供开箱即用的最佳桌面和移动浏览器支持（包括iOS Safari！）
• 在每种构建模式（SPA、SSR、PWA、移动应用程序、桌面应用程序和浏览器扩展）上拥有最佳支持，通过与我们自己的CLI紧密集成，为开发者提供最佳的开发体验
• 它容易定制（CSS）和扩展（JS）
• 它是性能最专注的框架
• 它可以自动进行树摇
• 我们的论坛和Discord聊天有一个令人难以置信的社区
• 拥有包含新功能的定期发布周期
• 得到快速修复并倾听社区的请求
• 处理整个开发体验（甚至包括创建应用程序的图标和启动画面）
• 担心臃肿吗？您不应该。如果您只想构建一个网站，Quasar只会构建网站所需的代码，没有其他。其他构建模式也是如此。

标题：Quasar是什么？

Quasar（发音为/ˈkweɪ.zɑɹ/）是一个基于MIT许可的开源Vue.js框架，作为Web开发人员，它让您能够快速创建多种类型的响应式网站/应用程序：

• 单页面应用（SPA）
• 服务器端渲染应用（SSR）（+可选的PWA客户端接管）
• 渐进式Web应用（PWA）
• 浏览器扩展（BEX）
• 移动应用程序（Android、iOS等）通过Cordova或Capacitor
• 多平台桌面应用程序（使用Electron）

Quasar的座右铭是：一次编写代码，同时部署为网站、移动应用程序和/或Electron应用程序。

是的，一个代码库适用于所有这些平台，通过先进的CLI和支持最佳实践的Quasar Web组件，帮助您以最短的时间开发应用程序。

使用Quasar时，您无需额外的庞大库，如Hammer.js、Moment.js或Bootstrap。它在内部已经涵盖了这些需求，并且具有很小的占地面积！

Quasar框架的特性和优势

由于Quasar提供了开箱即用的简易和强大功能，其CLI充满了各种特性，旨在让开发者的生活更加轻松。

引发思考

Quasar展望未来，设定了自己的高标准和现代标准。是的，在Web开发中取得进步，我们需要打破当前的规范。否则，我们今天可能仍然会继续用cgi-bin / perl编写网站，因为多年前开发者习惯于这样做。然而，大多数开发者在某个时刻习惯的东西并不意味着它是最佳解决方案或“确定”的解决方案，而Quasar永远不会妥协于选择我们认为不是高质量工作的最佳路径，即使是为了金钱。

我们希望通过Quasar实现的目标是提升整个Web开发的标准。让它前进，进化。改变观念。指出更好的替代方案。

以下是Quasar出色的方面和特点的非详尽列表。

一次完成所有平台

一种权威的代码源，同时适用于所有平台：响应式的桌面/移动网站（SPA、SSR + SPA客户端接管、SSR + PWA客户端接管）、渐进式Web应用（PWA）、移动应用程序（看起来像本地应用）和多平台桌面应用程序（通过Electron）。

最大的顶级、快速和响应式Web组件集

Quasar几乎涵盖了每个Web开发需求的组件。Quasar的每个组件都经过精心设计，为用户提供最佳体验。Quasar专注于性能和响应性——因此几乎感觉不到使用Quasar的开销。这种对性能和良好设计的关注是我们引以为傲的特色。

默认集成最佳实践

Quasar还旨在鼓励开发者遵循Web开发最佳实践。为此，Quasar在开箱即用时就提供了许多出色的功能——无需配置。

应用扩展支持

Quasar应用扩展是一种无痛地将复杂（或简单）的设置注入到您的网站/应用中的方法。它们也是我们庞大社区为您贡献并帮助您更快上手的方式。开发模式确实为使Quasar成为最具可扩展性和最强大的框架之一敞开了大门——只受您的想象力和创新的限制。

完整的RTL支持

Quasar组件和开发者自己的代码都支持RTL（从右到左）语言。如果使用了RTL语言包，开发者编写的网站/应用CSS代码会自动转换为RTL。

逐步迁移现有项目

Quasar提供了UMD（统一模块定义）版本，这意味着开发者可以将CSS和JS HTML标签添加到其现有项目中，然后就可以使用它了。无需构建步骤。

专注于您的功能，而不是模板代码

Quasar CLI提供的一流项目初始化使您作为开发者可以非常轻松地入门。您可以在最短的时间内将您的想法变为现实。换句话说，Quasar为您做了大部分的工作，因此您可以专注于您的功能，而不是模板代码。

自动化测试和审核

Quasar项目具有开箱即用的单元测试和端到端测试工具，以及不断增长的产品质量和安全性审核工具套件。所有这些都是为了确保您的网站/应用具有最高的质量。

不断壮大的社区

当开发者遇到无法解决的问题时，他们可以访问Quasar论坛或我们的Discord聊天服务器。社区总是在那里帮助您。您还可以通过在Twitter上关注我们来获取新版本和功能的更新。您还可以作为支持者/赞助商获得特别服务，并帮助确保Quasar在未来对您仍然相关！

广泛的平台支持

Google Chrome、Firefox、Edge、Safari、Opera、iOS、Android、MacOS、Linux、Windows。

Quasar语言包

Quasar默认提供了超过40种语言包。此外，如果您的语言包缺失，只需5分钟即可添加。

完善的文档

最后，值得一提的是，我们花费了大量的时间编写出色、无臃肿、重点突出和完整的文档，以便开发者可以快速掌握Quasar。我们在文档编写上投入了特别的精力，以确保没有混淆。

快速开始

只需两个简单步骤，几分钟内，您就可以使用Quasar的CLI开始运行一个完整的Vue应用，采用最先进的最佳实践构建，并准备好使用Quasar强大的UI库。

标题：先决条件

确保您的计算机上安装了Node >=14（或任何更新的LTS Node.js版本）和NPM >=6.14.12或Yarn >= 1.21.1。

请不要使用任何奇怪版本的Node，因为这些被视为实验性的。

创建一个项目

npm init quasar

启动，全部使用默认的选项：

D:\js\vue-ui>npm init quasar
Need to install the following packages:
create-quasar@1.8.4
Ok to proceed? (y) y


> npx
> create-quasar



 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... quasar-project
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Javascript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite 2 (stable | v1)
√ Package name: ... quasar-project
√ Project product name: (must start with letter if building mobile apps) ... Quasar App
√ Project description: ... A Quasar Project
√ Author: ... binbin.hou <binbin.hou@huifu.com>
√ Pick a Vue component style: » Composition API with <script setup>
√ Pick your CSS preprocessor: » Sass with SCSS syntax
√ Check the features needed for your project: » Linting (vite-plugin-checker + ESLint)
√ Pick an ESLint preset: » Prettier

 Quasar • Generating files...

 - index.html
 - postcss.config.cjs
 - quasar.config.js
 - README.md
 - .editorconfig
 - .gitignore
 - .npmrc
 - jsconfig.json
 - package.json
 - public/favicon.ico
 - src/App.vue
 - .vscode/extensions.json
 - .vscode/settings.json
 - public/icons/favicon-128x128.png
 - public/icons/favicon-16x16.png
 - public/icons/favicon-32x32.png
 - public/icons/favicon-96x96.png
 - src/assets/quasar-logo-vertical.svg
 - src/boot/.gitkeep
 - src/components/EssentialLink.vue
 - src/layouts/MainLayout.vue
 - src/pages/ErrorNotFound.vue
 - src/pages/IndexPage.vue
 - src/router/index.js
 - src/router/routes.js
 - src/css/app.scss
 - src/css/quasar.variables.scss
 - .eslintignore
 - .eslintrc.cjs

 Quasar •  SUCCESS  • The project has been scaffolded

√ Install project dependencies? (recommended) » Yes, use npm

安装完成的提示：

√ Install project dependencies? (recommended) » Yes, use npm


added 422 packages in 57s

79 packages are looking for funding
  run `npm fund` for details



> quasar-project@0.0.1 lint
> eslint --ext .js,.vue ./ --fix



To get started:

  cd quasar-project
  quasar dev # or: yarn quasar dev # or: npx quasar dev

Documentation can be found at: https://v2.quasar.dev

Quasar is relying on donations to evolve. We'd be very grateful if you can
read our manifest on "Why donations are important": https://v2.quasar.dev/why-donate
Donation campaign: https://donate.quasar.dev
Any amount is very welcome.
If invoices are required, please first contact Razvan Stoenescu.

Please give us a star on Github if you appreciate our work:
  https://github.com/quasarframework/quasar

Enjoy! - Quasar Team

当运行创建或初始化命令时，您将会收到一些选项提示。

根据您的需求，您可以选择CLI类型（Vite或Webpack），并且可以添加诸如TypeScript支持或不同的CSS预处理器之类的内容。如果您对任何选项不确定，只需使用默认值（按回车键），您就可以开始了。

如果您希望，稍后可以更改选项，但CLI类型除外。

可选 - 安装全局CLI

为了更多地使用Quasar，您还应该安装全局CLI。借助它，您可以直接在终端中运行Quasar命令，运行本地HTTP服务器进行测试，或对项目进行升级。

npm i -g @quasar/cli

第二步：开始开发

对于第二步，导航到新创建的项目文件夹中，并运行Quasar CLI命令启动开发服务器。

cd <project_folder_name>
# then run:

# if you have the global CLI:
quasar dev
# otherwise:
yarn quasar dev # or: npx quasar dev

实战，我们这里没有全局的 cli，所以：

cd quasar-project

npx quasar dev

日志如下：

 .d88888b.
d88P" "Y88b
888     888
888     888 888  888  8888b.  .d8888b   8888b.  888d888
888     888 888  888     "88b 88K          "88b 888P"
888 Y8b 888 888  888 .d888888 "Y8888b. .d888888 888
Y88b.Y8b88P Y88b 888 888  888      X88 888  888 888
 "Y888888"   "Y88888 "Y888888  88888P' "Y888888 888
       Y8b


 » Reported at............ 2024/5/9 15:23:08
 » App dir................ D:\js\vue-ui\quasar-project
 » App URL................ http://172.20.10.2:9000/
                           http://localhost:9000/
                           http://172.24.16.1:9000/
 » Dev mode............... spa
 » Pkg quasar............. v2.16.2
 » Pkg @quasar/app-vite... v1.9.3
 » Browser target......... es2019|edge88|firefox78|chrome87|safari13.1

 App • Opening default browser at http://localhost:9000/

直接浏览器访问：

http://localhost:9000/

参考资料

https://quasar.dev/introduction-to-quasar

• Quasar
• 标题：Quasar是什么？
• Quasar框架的特性和优势
  • 引发思考
  • 一次完成所有平台
  • 最大的顶级、快速和响应式Web组件集
  • 默认集成最佳实践
  • 应用扩展支持
  • 完整的RTL支持
  • 逐步迁移现有项目
  • 专注于您的功能，而不是模板代码
  • 自动化测试和审核
  • 不断壮大的社区
  • 广泛的平台支持
  • Quasar语言包
  • 完善的文档
• 快速开始
  • 标题：先决条件
  • 创建一个项目
    • 可选 - 安装全局CLI
  • 第二步：开始开发
• 参考资料