vite + vue3 + ts + SSR 使用 Quasar 框架

Quasar，是一个基于 Vue 的前端 GUI 框架，它可以让你用同一套代码库构建不同目标的应用，如 SPA、SSR、PWA、移动端应用、桌面端应用以及浏览器插件。除此之外，它还提供了一整套 Material Design 风格的组件库。Quasar 2 支持 vue3。

安装 Quasar 有四种方式，其功能有所差别，官网强烈推荐使用 Quasar CLI 来安装，这样 Quasar 框架的功能最强大。

Quasar CLI 环境要求：Node 14 +用于 Quasar CLI 与 Vite。

# 查看 node 版本
node -v

全局安装 Quasar CLI 脚手架

npm install @quasar/cli -g

上面的命令，会把 Quasar CLI 安装到本机 nodejs 所在的全局位置。比如：/usr/local/nodejs

ls -l /usr/local/nodejs/bin
ls -l /usr/local/nodejs/lib/node_modules

创建软链接：

ln -s /usr/local/nodejs/bin/quasar /usr/local/bin/quasar

查看 Quasar CLI 版本：

quasar -v

创建 Quasar 项目

新版 Quasar 使用@quasar/cli，以前quasar create命令创建项目，已经被遗弃，现此命令只能创建模板。npm 创建项目命令如下：

npm init quasar

# create-quasar 软件包对话框。选择第一项，回车。
? 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 全部功能（强烈推荐），允许你直接运行 Quasar CLI 命令和其他一些有用的命令，如 quasar upgrade（无缝升级 Quasar 软件包）或 quasar serve（用一个临时网络服务器服务你的可分发文件）。
第二个选项是给现项目增加扩展，安装 Quasar 核心包（运行重要的命令– dev, build, inspect, info, describe等），它被本地安装到每个 Quasar 项目文件夹中。
第三项选项是给现项目添加 UI，安装 Quasar UI 包，只使用其 UI 功能，供 vue 组件被使用。

# 给项目文件夹起名字
? Project folder: › quasar-project

# 选择使用 vue3，还是 vue2
❯   Quasar v2 (Vue 3 | latest and greatest) - recommended
    Quasar v1 (Vue 2)

# 选择 Javascript，还是 Typescript。选择 Typescript，回车
? Pick script type: › - Use arrow-keys. Return to submit.
    Javascript
❯   Typescript

# 选择 Webpack，还是 Vite。选择 Vite，回车
? Pick Quasar App CLI variant: › - Use arrow-keys. Return to submit.
    Quasar App CLI with Webpack
❯   Quasar App CLI with Vite

# 项目名称
? Package name: › quasar-project

# 项目生产环境名称
? Project product name: (must start with letter if building mobile apps) › Quasar App

# 项目简介
?  Project description: › A Quasar Project

# 项目作者
? Author: › xxx 

# 选择组件样式
? Pick a Vue component style: › - Use arrow-keys. Return to submit.
    Composition API
❯   Composition API with <script setup> - recommended
    Options API

# 选择 CSS
? 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)


# 选择 
? 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

# 选择 格式化工具
? Pick an ESLint preset: › - Use arrow-keys. Return to submit.
❯   Prettier - https://github.com/prettier/prettier
    Standard
    Airbnb


# 初始化项目
?  Install project dependencies? (recommended) › - Use arrow-keys. Return to submit.
❯   Yes, use npm
    No, I will handle that myself

上面的选择，会创建项目：vite + vue3 + Typescript + vue-router + Pinia + Axios + SCSS + ESLint + Prettier + Vue-i18n。组件编写方式：<script lang="ts" setup>组合式 API。

cd quasar-project

# 以 SPA 模式启动项目：
quasar dev

# 构建 SPA 生产版本：
quasar build

# 启动 SPA 调试功能的生产构建：
quasar build -d

# 首次添加 SSR 模式：
quasar mode add ssr

# 若无上面的添加 SSR 模式，直接进入 SSR 模式开发，会自动添加 SSR 模式。
# 以 SSR 模式启动项目：
quasar dev -m ssr

# 构建 SSR 生产版本：
quasar build -m ssr

# 启动 SSR 调试功能的生产构建：
quasar build -m ssr -d

# 首次添加 PWA 模式：
quasar mode add pwa

# 若无上面的添加 PWA 模式，直接进入 PWA 模式开发，会自动添加 PWA 模式。
# 以 PWA 模式启动项目：
quasar dev -m pwa

# 构建 PWA 生产版本：
quasar build -m pwa

# 启动 PWA 调试功能的生产构建：
quasar build -m pwa -d

Quasar提供了两种用于创建移动应用的解决方案：其中 Capacitor 是 Cordova 的更现代替代品。但 Capacitor 仅支持 iOS 和 Android。

# 安装了Cordova CLI 和必要的SDK：
npm install -g cordova

# 首次添加 移动 APP 模式：
quasar mode add cordova

# 以 移动 APP 模式启动项目：
quasar dev -m [ios|android] --ide

# 构建 移动 APP 生产版本：
quasar build -m [ios|android] --ide

# 启动 移动 APP 调试功能的生产构建：
quasar build -m [ios|android] --ide -d

# 首次添加 Electron 模式：
quasar mode add electron

# 以 Electron 模式启动项目：
quasar dev -m electron

# 构建 Electron 生产版本：
quasar build -m electron

# 启动 Electron 调试功能的生产构建：
quasar build -m electron -d

卸载 Quasar CLI

由于特殊原因，需要卸载 Quasar CLI 时，使用以下命令：

npm uninstall @quasar/cli -g
rm -f /usr/local/bin/quasar
rm -rf /usr/local/nodejs/lib/node_modules/@quasar

# 查找 quasar 残留文件    
find /usr/local -name quasar*
find /usr/local -name @quasar*