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  - 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。组件编写方式：组合式 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 -grm -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*

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com