最详细的 Quasar Framework 的安装与配置

介绍一下 Quasar Framework

Quasar Framework 是一个基于 Vue.js 的全功能框架，它允许快速构建跨平台的应用程序，包括单页应用（SPA）、服务器端渲染（SSR）、移动应用（使用 Cordova 或 Capacitor）以及 Electron 应用。

安装步骤

安装 Quasar Framework 主要包括安装 Quasar CLI 和创建新项目两个步骤。

1. 安装 Quasar CLI

首先，在全局环境中安装 Quasar CLI。这可以通过以下命令完成：

npm install -g @quasar/cli

2. 创建新的 Quasar 项目

使用 Quasar CLI 创建新项目。根据 Quasar 的最新指南，您可以使用以下命令：

使用 npm

npm init quasar

或者使用 Yarn

yarn create quasar

这些命令会启动一个交互式的命令行界面，引导您选择项目的配置选项。

项目配置

在项目配置过程中，需要做出一系列选择，下面是详细的介绍

PS D:\Code\Python\Scorpio> npm init 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? » - Use arrow-keys. Return to submit.
>   App with Quasar CLI, let's go! - spa/pwa/ssr/bex/electron/capacitor/cordova
    AppExtension (AE) for Quasar CLI
    Quasar UI kit

输入完成安装指令以后，这里就会出现这样的选择界面，这个选择界面就是我们构建的选择部分

Quasar 提供了多种构建选项，包括单页应用（SPA）、渐进式网页应用（PWA）、服务器端渲染（SSR）、浏览器扩展（BEX）、Electron 应用以及使用 Cordova 或 Capacitor 的移动应用。您的选择应基于您希望开发的应用类型。下面是各个选项的简要说明：

1. App with Quasar CLI (spa/pwa/ssr/bex/electron/capacitor/cordova)： 这是最通用的选项，适用于想要使用 Quasar CLI 构建各种类型应用的开发者。可以在这个选项中进一步选择具体的应用类型，如单页应用（SPA）、渐进式网页应用（PWA）、服务器端渲染（SSR）等。

2. AppExtension (AE) for Quasar CLI： 这个选项用于开发 Quasar CLI 的扩展。如果想要扩展 Quasar CLI 的功能，可以选择这个选项。

3. Quasar UI kit： 如果想要开发一个 Quasar UI 组件库或主题，可以选择这个选项。

对于大多数项目来说，第一个选项 “App with Quasar CLI” 是最合适的。在这个选项中，可以选择创建一个标准的前端应用，如 SPA、PWA 或 SSR 等。如果打算开发一个跨平台的移动应用或桌面应用，可以选择 Electron、Cordova 或 Capacitor。

√ What would you like to build? » App with Quasar CLI, let's go!
? Project folder: » quasar-project

接下来就会出现第二个需要填写的内容，这个询问的是你的项目文件夹名称是什么，这里填写你自己的项目文件夹名称

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
? Pick Quasar version: » - Use arrow-keys. Return to submit.
>   Quasar v2 (Vue 3 | latest and greatest) - recommended
    Quasar v1 (Vue 2)

接下来选择是你需要用来构建的Vue版本，这里我们选择Vue 3进行项目的构建

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
? Pick script type: » - Use arrow-keys. Return to submit.
    Javascript
>   Typescript

接下来就会询问用来构建的语言是JavaScript还是Typescript，这里选择的是Typescript，

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
? Pick Quasar App CLI variant: » - Use arrow-keys. Return to submit.
>   Quasar App CLI with Vite - recommended
    Quasar App CLI with Webpack

这里的选择是关于您想要使用的构建工具和开发服务器。Quasar 提供了两种不同的 CLI 变体：一种是基于 Vite 的，另一种是基于 Webpack 的。这两种工具都用于打包和构建您的应用，但它们在某些方面有所不同。

Quasar App CLI with Vite

• Vite 是一个新一代的前端构建工具，提供了快速的服务器启动和热模块替换（HMR）。
• 它利用了现代浏览器对 ES 模块的原生支持，使得构建过程更快。
• Vite 适合于新项目，特别是追求快速的开发环境和较新的技术栈。

Quasar App CLI with Webpack

• Webpack 是一个成熟且广泛使用的模块打包器，适用于复杂的应用构建。
• 它提供了广泛的插件生态系统和深度的配置选项。
• 如果已经熟悉 Webpack，或者依赖于特定的 Webpack 特性或插件，那么选择基于 Webpack 的 CLI 可能更合适。

总结

• 如果想要更快的构建速度和较新的构建技术，选择 Vite。
• 如果需要更成熟的生态系统和更细粒度的配置，选择 Webpack。

对于大多数新项目来说，“Quasar App CLI with Vite” 通常是推荐的选择，因为它提供了更现代和快速的开发体验。

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
? Package name: » scorpio

这里在询问包的名字，直接回车确认，因为上面Project folder上面的名字会直接平移到下面

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
? Project product name: (must start with letter if building mobile apps) » Quasar App

这里需要填写的是展示给用户的名称，如果这里还没有确定就使用代号，可以在后面再进行修改

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
√ Project product name: (must start with letter if building mobile apps) ... Scorpio
? Project description: » A Quasar Project

这里需要填写的是项目描述，随便写就可以了

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
√ Project product name: (must start with letter if building mobile apps) ... Scorpio
√ Project description: ... A Quasar Project
? Author: » Hellohistory <85825011+Hellohistory@users.noreply.github.com>

这里会出现一个作者名，直接回车默认就可以了，没有出现或者需要修改，直接修改就可以了

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
√ Project product name: (must start with letter if building mobile apps) ... Scorpio
√ Project description: ... A Quasar Project
√ Author: ... Hellohistory <85825011+Hellohistory@users.noreply.github.com>
? Pick a Vue component style: » - Use arrow-keys. Return to submit.
>   Composition API - recommended
    Composition API with <script setup>
    Options API
    Class-based

这个选择是关于您希望在 Vue 组件中使用哪种编写风格。Vue 提供了几种不同的方式来定义组件的行为和模板。以下是各个选项的解释：

1. Composition API

• 这是 Vue 3 引入的一种新的编写组件的方式。
• 它提供了更灵活的代码组织方式，使得逻辑复用和代码管理变得更加容易。
• 推荐用于需要更好逻辑组织或更复杂应用的场景。

2. Composition API with <script setup>

• 这是 Vue 3.2 引入的一个增强特性，它允许您以更声明式的方式使用 Composition API。
• <script setup> 是一种更简洁的语法，减少了样板代码，并且可以更直观地组织组件的逻辑。
• 它结合了 Composition API 的优点，并进一步提高了代码的可读性和组织性。

3. Options API

• 这是 Vue 2 中引入的编写组件的传统方式。
• 在 Options API 中，组件的逻辑是根据其功能（如 data, methods, computed 等）组织的。
• 对于熟悉 Vue 2 或偏好更传统编写方式的开发者来说，这是一个合适的选择。

4. Class-based

• 这是使用 TypeScript 和类风格的语法来编写 Vue 组件的方式。
• 它通常结合了 Vue Class Component 库和 Vue Property Decorator 库来实现。
• 如果您喜欢面向对象编程的风格，或者在使用 TypeScript 时希望得到更一致的体验，可以考虑这个选项。

总结

• 如果你正在寻找最新、最灵活的方式来构建 Vue 3 应用，并且不介意学习新的概念，那么选择 Composition API 或者 Composition API with <script setup> 是个不错的选择。
• 如果更习惯于 Vue 2 的编程风格或正在迁移旧项目，那么 Options API 可能更合适。
• 如果更喜欢面向对象的编程方式，并且使用 TypeScript，那么可以考虑 Class-based 方法。

一般来说，对于新项目，推荐使用 Composition API 或 Composition API with <script setup>，因为它们提供了更好的逻辑复用和组织方式。

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
√ Project product name: (must start with letter if building mobile apps) ... Scorpio
√ Project description: ... A Quasar Project
√ Author: ... Hellohistory <85825011+Hellohistory@users.noreply.github.com>
√ Pick a Vue component style: » Composition API with <script setup>
? Pick your CSS preprocessor: » - Use arrow-keys. Return to submit.
>   Sass with SCSS syntax
    Sass with indented syntax
    None (the others will still be available)

在这里正在选择用于项目的 CSS 预处理器。CSS 预处理器是一种脚本语言，它扩展了 CSS 的功能，并编译成标准的 CSS 文件。预处理器添加了一些有用的特性，如变量、嵌套规则、混合（mixins）和函数等，这些功能可以使您的 CSS 更易于维护和扩展。以下是您提供的选项说明：

1. Sass with SCSS syntax

• SCSS（Sassy CSS）是 Sass 的最新语法版本。
• 它使用花括号和分号，语法与传统 CSS 更相似。
• 它是一种非常受欢迎的 CSS 预处理器语法，由于其易读性和易于迁移现有 CSS 代码的特点，它被广泛使用。

2. Sass with indented syntax

• 这是 Sass 的另一种语法风格，也被称为“Sass 旧语法”或“缩进语法”。
• 它使用缩进而不是花括号和分号来分隔代码块。
• 这种语法更简洁，但可能不太适合那些习惯于传统 CSS 语法的开发者。

3. None (the others will still be available)

• 选择“无”意味着您的项目将不会预先配置任何 CSS 预处理器，但您稍后仍然可以添加。
• 如果您打算使用纯 CSS 或另一种预处理器（如 Less 或 Stylus），可以选择这个选项。

建议

• 如果已经熟悉 CSS 语法，并且希望获得更多的编程功能，那么 Sass with SCSS syntax 是一个很好的选择。
• 如果更喜欢简洁的缩进式语法，可以选择 Sass with indented syntax，但要注意它可能不太适合所有开发者。
• 如果不打算使用 Sass 或更倾向于以后再决定，可以选择 None。

大多数现代前端项目倾向于使用 SCSS 语法，因为它结合了 CSS 的直观性和 Sass 的强大功能。

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
√ Project product name: (must start with letter if building mobile apps) ... Scorpio
√ Project description: ... A Quasar Project
√ Author: ... Hellohistory <85825011+Hellohistory@users.noreply.github.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: »
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
(*)   ESLint
(*)   State Management (Pinia)
( )   State Management (Vuex) [DEPRECATED by Vue Team]
(*)   Axios
(*)   Vue-i18n

在这个界面上，需要选择您的项目所需的特性。每个选项代表一个特定的功能或工具，可以帮助您构建和管理您的应用。以下是这些选项的简要说明：

1. ESLint (推荐)

• ESLint 是一个静态代码分析工具，用于识别和报告 JavaScript 代码中的问题。
• 它有助于保持代码质量和一致性，通常被认为是任何现代 JavaScript 项目的重要组成部分。

2. State Management (Pinia)

• Pinia 是 Vue 3 的官方状态管理库，用于在 Vue 应用中管理共享状态。
• 如果有复杂的状态管理需求，或需要在多个组件之间共享数据，选择 Pinia 会很有帮助。

3. State Management (Vuex) [由 Vue 团队弃用]

• Vuex 是 Vue 2 的官方状态管理库，但 Vue 团队现在推荐使用 Pinia。
• 如果正在迁移老项目或更熟悉 Vuex，可以选择它，但对于新项目，建议使用 Pinia。

4. Axios

• Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 Node.js 中的 HTTP 通信。
• 如果需要从外部 API 获取数据或发送数据，选择 Axios 是合适的。

5. Vue-i18n

• Vue-i18n 是 Vue 的国际化插件，用于多语言支持。
• 如果您的应用需要支持多种语言，您可以考虑添加这个功能。

如何选择

• 几乎所有项目都会受益于使用 ESLint。
• 如果涉及复杂的状态管理，考虑使用 Pinia。
• 对于需要与后端 API 交互的应用，Axios 是一个不错的选择。
• 对于需要多语言支持的应用，Vue-i18n 很有用。

您可以使用键盘上的箭头键来选择，空格键来切换选项的选择状态。完成后，按回车键继续。

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
√ Project product name: (must start with letter if building mobile apps) ... Scorpio
√ Project description: ... A Quasar Project
√ Author: ... Hellohistory <85825011+Hellohistory@users.noreply.github.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: » ESLint, State Management (Pinia), Axios, Vue-i18n
? Pick an ESLint preset: » - Use arrow-keys. Return to submit.
>   Prettier - https://github.com/prettier/prettier
    Standard
    Airbnb
    

在这个步骤中，您正在选择一个 ESLint 预设（preset），这将决定您的项目中将要使用的 ESLint 配置。每个预设都有其自己的代码风格和规则集，下面是您提供的选项的简要说明：

1. Prettier

• Prettier 是一个流行的代码格式化工具，它支持多种语言并强制执行一致的代码风格。
• 选择这个预设意味着您将使用 Prettier 的风格规则。它侧重于代码的外观，确保代码格式的一致性。
• 链接：Prettier GitHub

2. Standard

• Standard 是一个流行的 JavaScript 风格指南，提供了一组固定的编码规则，旨在提高代码的一致性和可读性。
• 选择 Standard 意味着将必须要遵循这些规则。Standard 风格不使用分号，并且有一套特定的格式化规则。

3. Airbnb

• Airbnb 的 JavaScript 风格指南是最受欢迎的 ESLint 预设之一，它提供了一套详细的编码规则。
• 这个风格指南特别适合大型项目和团队，因为它包含了广泛的最佳实践和规范。
• Airbnb 风格指南相比于其他选项通常更严格一些。

选择建议

选择哪个预设取决于个人或团队的偏好：

• 如果重视代码的外观一致性，并且喜欢自动化的格式化，那么 Prettier 是一个不错的选择。
• 如果希望有一个简单且一致的编码风格，且不想使用分号，可以选择 Standard。
• 如果倾向于使用一套详尽的编码规则，并且愿意遵循严格的风格指南，那么 Airbnb 是一个好选择。

最终的选择应该符合开发习惯和团队的工作流程。可以使用键盘的箭头键进行选择，然后按回车键提交选择。

√ What would you like to build? » App with Quasar CLI, let's go!
√ Project folder: ... scorpio
√ Pick Quasar version: » Quasar v2 (Vue 3 | latest and greatest)
√ Pick script type: » Typescript
√ Pick Quasar App CLI variant: » Quasar App CLI with Vite
√ Package name: ... scorpio
√ Project product name: (must start with letter if building mobile apps) ... Scorpio
√ Project description: ... A Quasar Project
√ Author: ... Hellohistory <85825011+Hellohistory@users.noreply.github.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: » ESLint, State Management (Pinia), Axios, Vue-i18n
√ Pick an ESLint preset: » Prettier

 Quasar • Generating files...

 - index.html
 - postcss.config.cjs
 - quasar.config.js
 - README.md
 - .editorconfig
 - .gitignore
 - .npmrc
 - package.json
 - tsconfig.json
 - public/favicon.ico
 - src/App.vue
 - src/env.d.ts
 - src/quasar.d.ts
 - src/shims-vue.d.ts
 - .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/components/ExampleComponent.vue
 - src/components/models.ts
 - src/layouts/MainLayout.vue
 - src/pages/ErrorNotFound.vue
 - src/pages/IndexPage.vue
 - src/router/index.ts
 - src/router/routes.ts
 - src/css/app.scss
 - src/css/quasar.variables.scss
 - src/boot/axios.ts
 - src/boot/i18n.ts
 - src/i18n/index.ts
 - src/i18n/en-US/index.ts
 - .eslintignore
 - .eslintrc.cjs
 - .prettierrc
 - src/stores/example-store.ts
 - src/stores/index.ts
 - src/stores/store-flag.d.ts

 Quasar •  SUCCESS  • The project has been scaffolded

? Install project dependencies? (recommended) » - Use arrow-keys. Return to submit.
>   Yes, use npm
    No, I will handle that myself

当所有的都选择好以后，建议选择自动使用npm进行自动安装

这样就可以将Quasar Framework配置完成了