前端开发-quasar CLI使用

Quasar CLI 是一个强大的工具，用于快速构建高性能的 Vue.js 应用程序。结合自身的使用经验来看是非常好用的一个CLI，它提供了丰富的功能和插件，帮助开发者快速搭建现代化的前端项目。我主要是觉得他的组件库非常好用，相对于Element UI来说更容易上手，而且样式也更好看。以下是使用 Quasar CLI 的一些关键步骤和技巧。
Quasar 中文文档
Quasar 英文文档

安装 Quasar CLI

在开始使用 Quasar CLI 之前，需要先全局安装它。可以通过 npm 或 yarn 进行安装。

npm install -g @quasar/cli

或者使用 yarn：

yarn global add @quasar/cli

创建新项目

安装完成后，可以使用 Quasar CLI 创建一个新的项目。运行以下命令并按照提示进行配置：

quasar create my-project

这将引导你完成项目的初始化过程，包括选择项目模板、配置 ESLint、Prettier 等。

启动开发服务器

项目创建完成后，进入项目目录并启动开发服务器：

cd my-project
quasar dev

这将启动一个本地开发服务器，并自动打开浏览器访问 http://localhost:8080。

构建生产版本

当项目开发完成后，可以使用以下命令构建生产版本：

quasar build

Quasar 支持多种构建目标，如 SPA、PWA、SSR、Electron 和 Cordova。可以通过 --mode 参数指定构建目标：

quasar build --mode pwa

添加 Quasar 插件

Quasar 提供了丰富的插件，可以通过以下命令添加：

quasar ext add @quasar/icon-set

这将安装并配置指定的插件，如图标集、UI 组件等。

使用 Quasar 组件

Quasar 提供了大量的 UI 组件，可以直接在项目中使用。例如，使用 q-btn 组件创建一个按钮：

<template>
  <q-btn color="primary" label="Click Me" />
</template>

配置 Quasar

Quasar 的配置文件位于 quasar.conf.js 中，可以通过该文件自定义构建过程、插件配置等。例如，添加自定义的 Webpack 配置：

module.exports = configure(function (ctx) {
  return {
    framework: {
      plugins: ['Notify', 'Dialog'], // 启用 Quasar 插件
      iconSet: 'material-icons',     // 图标库
    },
    build: {
      env: { API_URL: ctx.dev ? 'http://dev.api.com' : 'https://api.com' },
    },
    devServer: {
      port: 3000,                   // 自定义端口
      proxy: { '/api': 'http://localhost:5000' } // 代理 API 请求
    }
  }
});

使用 Quasar 的样式工具

Quasar 提供了强大的样式工具，如 Flexbox 布局、间距工具等。可以在项目中使用这些工具快速构建响应式布局：

<div class="row justify-center">
  <div class="col-6">
    <p>Centered content</p>
  </div>
</div>

添加 Quasar 组件/插件

使用 UI 组件

直接在任何 .vue 文件中：

<template>
  <q-btn color="primary" label="Click Me" @click="showNotify" />
</template>

<script setup>
import { useQuasar } from 'quasar';

const $q = useQuasar();
function showNotify() {
  $q.notify('Hello from Quasar!');
}
</script>

5.2 安装插件（如 Axios）

quasar ext add @quasar/axios
在 boot/axios.js 中配置：

import { boot } from 'quasar/wrappers';
import axios from 'axios';

export default boot(({ app }) => {
  app.config.globalProperties.$axios = axios;
});

环境变量

在项目根目录创建 .env 文件：

VUE_APP_API_URL=https://api.example.com

代码中访问：

const apiUrl = process.env.VUE_APP_API_URL;

调试与测试

Quasar 集成了 Vue Devtools，可以方便地进行调试。此外，Quasar 也支持 Jest 和 Cypress 进行单元测试和端到端测试。

quasar test --unit jest
quasar test --e2e cypress

部署

Quasar 项目可以部署到各种平台，如 GitHub Pages、Netlify、Vercel 等。构建完成后，将生成的 dist 目录上传到目标平台即可。

quasar build

项目结构

my-app/
├── src/
│ ├── boot/ # 启动脚本（如 axios 初始化）
│ ├── css/ # 全局样式
│ ├── layouts/ # 布局组件
│ ├── pages/ # 路由页面
│ ├── router/ # 路由配置
│ ├── stores/ # Pinia/Vuex 状态管理
│ └── App.vue # 根组件
├── quasar.config.js # 主配置文件
└── package.json
通过以上步骤，可以快速上手 Quasar CLI，并利用其丰富的功能构建现代化的前端应用。