• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 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*