Quasar CLI

Quasar CLI是Quasar Framework的骄傲。您可以无缝地构建:

  • SPA(单页应用/网站),
  • SSR(服务器端渲染的应用/网站),
  • PWA(渐进式网页应用),
  • BEX(浏览器扩展),
  • 移动应用(通过Cordova或Capacitor),
  • Electron应用

…在同一个项目文件夹中,确保您遵循最佳的Quasar实践,而一切都将开箱即用

在线试用Quasar CLI

您可以直接在浏览器中在线试用Quasar CLI,而不需要安装任何东西! 您还可以使用命令行,因此它几乎与在本地创建项目相同。

TL;DR

要求:

  • Node 12+用于Quasar CLI与Webpack,Node 14+用于Quasar CLI与Vite。
  • Yarn v1(强烈推荐),PNPM,或NPM。
$ yarn global add @quasar/cli
$ yarn create quasar

# or:

$ npm i -g @quasar/cli
$ npm init quasar

# or:

$ pnpm add -g @quasar/cli # experimental support
$ pnpm create quasar # experimental support

如果你想要,请选择 “Quasar CLI with Vite”。

  • 更快的开发服务器启动
  • 更快的热更新
  • 更快的构建
  • 卓越的PWA、SSR和BEX Quasar模式(更多的功能)
Go to User Interface Components

安装/项目脚手架

要求:

  • Node 12+用于Quasar CLI与Webpack,Node 14+用于Quasar CLI与Vite。
  • Yarn v1(强烈推荐),PNPM,或NPM。
  1. 让我们创建一个Quasar应用程序:

    $ yarn create quasar
    # or:
    $ npm init quasar
    # or:
    $ pnpm create quasar # experimental support
    

    TIP

    你可能会收到安装create-quasar软件包的确认,按回车键确认。

  2. 选择App with Quasar CLI选项,然后选择Quasar v2

  3. 然后你会被问到你想要哪个Quasar App CLI。你是喜欢Vite的还是Webpack的?

提示:如果你想要的话,请选择 "Quasar CLI with Vite":

  • 更快的开发服务器启动
  • 更快的热更新
  • 更快的构建
  • 卓越的PWA、SSR和BEX Quasar模式(更多的功能)
  1. 回答剩下的问题,你就差不多完成了。

  2. 现在,您想直接运行Quasar CLI命令(例如:$ quasar dev/build)还是通过yarn或npx($ yarn quasar dev/build /npx quasar dev/build)?

    我们强烈建议选择第一种,能够直接运行命令。实际上,你能做的甚至不止这些(例如,"quasar upgrade"或"quasar serve"命令)。为此,你需要全局安装@quasar/cli包。

    $ yarn global add @quasar/cli
    # or
    $ npm install -g @quasar/cli
    # or
    $ pnpm add -g @quasar/cli # experimental support
    

    TIP

    如果你使用Yarn,确保Yarn 全局安装位置在你的PATH中:

    # in ~/.bashrc or equivalent
    export PATH="$(yarn global bin):$PATH"
    
    # for fish-shell:
    set -U fish_user_paths (yarn global bin) $fish_user_paths
    

    在Windows下,修改用户的PATH环境变量。如果您使用的是yarn,则添加`%LOCALAPPDATA%\yarn\bin`;否则,如果您使用npm,则添加`%APPDATA%-\npm`。
    或者,要轻松完成此操作,请在终端中输入以下代码:
    # If you're using Yarn:
    setx path "%path%;%LocalAppData%\yarn\bin"
    
    # Or if you're using NPM:
    setx path "%path%;%AppData%\npm",
    

    WSL2

    微软推荐的【WSL2中的Nodejs开发环境设置】(https://docs.microsoft.com/en-us/windows/nodejs/setup-on-wsl2).

    当使用WSL2(Windows Subsystem for Linux)时,微软建议将文件保存在Linux文件系统中,以实现性能最大化。如果项目文件在Windows上而不是在本地Linux文件系统上,项目的构建速度会慢3倍左右,而且HMR(热模块重载)在没有hack的情况下将无法工作。这在基于Windows的开发环境的Docker中也是如此。

Quasar CLI如何工作

Quasar CLI (@quasar/cli) 与@quasar/app-vite@quasar/app-webpack协同工作。第一个是可选的(但强烈推荐),允许你直接运行Quasar CLI命令和其他一些有用的命令,如quasar upgrade(无缝升级Quasar软件包)或quasar serve(用一个临时网络服务器服务你的可分发文件)。第二个包是它的核心(运行重要的命令–dev, build, inspect, info, describe等),它被本地安装到每个Quasar项目文件夹中。

在没有全局的@quasar/cli的情况下运行

然而,如果你想独立于全局安装的@quasar/cli包,你可以直接运行Quasar CLI命令。@quasar/app-vite@quasar/app-webpack(这是每个项目文件夹所特有的)将运行所有CLI命令。

这里有一些选项:

  1. 你可以编写npm脚本(在你的package.json中)来运行Quasar命令。

    在你的package.json中添加一些npm脚本的例子:

    // package.json
    "scripts": {
      "dev": "quasar dev",
      "build": "quasar build",
      "build:pwa": "quasar build -m pwa"
    }
    

    以上将允许你运行$ yarn dev$ yarn build而不需要全局安装的@quasar/cli,如果你想这样做的话。

  2. 另外,你也可以通过Yarn直接运行Quasar CLI命令:

    $ yarn quasar dev
    $ yarn quasar inspect
    # ..etc
    

  3. Or use npx:

    $ npx quasar dev
    $ npx quasar inspect
    # ..etc
    

下一步是什么?

Go to User Interface Components