只需两个简单的步骤,几分钟后,你就可以开始运行一个功能齐全的 Vue 应用,该应用通过 Quasar 的 CLI 采用最先进的最佳实践构建,并且还配备了 Quasar 自己强大的 UI 库。
¥It takes two easy steps and in a couple of minutes, you are off and running with a full-fledged Vue app, built with state-of-the-art best practices via Quasar’s CLI and also ready with Quasar’s own powerful UI library.
提示
如果你是更高级的 Vue 开发者,我们建议你从 在所有 Quasar 之间做出选择风格 开始。
¥If you are a more advanced Vue developer, we invite you to start off by deciding between all Quasar flavours.
先决条件(Prerequisites)
¥Prerequisites
确保你的计算机上安装了 Node >=14(或任何较新的 LTS Node.js 版本)和 NPM v6+、Yarn v1(经典版)或 PNPM v8+。请勿使用任何奇数版本的 Node,因为它们是 被认为是实验性的。
¥Make sure that you have Node >=14 (or any newer LTS Node.js version) and NPM v6+ or Yarn v1 (classic) or PNPM v8+ installed on your machine. Please do not use any odd versions of Node, as these are considered experimental.
步骤 1:创建项目(Step 1: Create a Project)
¥Step 1: Create a Project
输入以下命令:
¥Enter the following command:
$ yarn create quasar
运行 create
或 init
命令时,系统会提示你一些选项。根据你的需求,你可以选择 CLI 类型(Vite 或 Webpack),并可以添加 TypeScript 支持或其他 CSS 预处理器等。如果你对任何选项不确定,只需采用默认值(按 Enter 键)即可。你可以根据需要稍后更改除 CLI 类型之外的选项。
¥As the create
or init
command runs, you’ll be prompted with some options. Depending on your needs, you can select the CLI type (Vite or Webpack) and you can add things like TypeScript support or a different CSS preprocessor. If you are unsure about any of the options, just take the defaults (hit enter) and you’ll be good to go. You can change the options, except for the CLI type, later if you wish.
可选 - 安装全局 CLI(Optional - Install the Global CLI)
¥Optional - Install the Global CLI
要使用 Quasar 进行更多操作,你还应该安装全局 CLI。有了它,你可以直接在终端中运行 Quasar 命令,运行本地 http 服务器进行测试或升级你的项目。
¥For doing more with Quasar, you should also install the global CLI. With it you can directly run Quasar commands in the terminal, run a local http server for testing or do upgrades on your project.
$ yarn global add @quasar/cli
步骤 2:开始开发(Step 2: Start developing)
¥Step 2: Start developing
对于第二步也是最后一步,导航到新创建的项目文件夹并运行 Quasar CLI 命令以启动开发服务器。
¥For the second and last step, navigate into the newly created project folder and run the Quasar CLI command to start the dev server.
$ cd <project_folder_name>
# then run:
# if you have the global CLI:
$ quasar dev
# otherwise:
$ yarn quasar dev # or: npx quasar dev
你将看到开发服务器正在编译你的新应用,编译完成后,你的新应用应该会在浏览器中打开。就是这样!现在,你可以使用自己喜欢的 IDE/代码编辑器开发应用。
¥You’ll see the dev server compiling your new application and once it is finished, your new app should open up in your browser. That’s it! You can now develop your app with your favorite IDE/ Code Editor.
现在怎么办?(Now What?)
¥Now What?
如果你是 Quasar 新手,并且……
¥If you are new to Quasar and a…
(Vue 初学者)JavaScript 开发者 - 我们强烈推荐 学习 Vue。
¥(Beginner Vue) JavaScript Dev - We highly recommend learning Vue.
Vue 中级开发 - 我们建议你熟悉 Quasar 的目录结构 及其不同的构建模式,以及 从 SSR 开始(你构建的项目是 SPA)。
¥Intermediate Vue Dev - We recommend getting accustomed to Quasar’s Directory Structure and its different build modes, starting with SSR (the project you built is an SPA).
高级 Vue 开发 - 你可能想要在 Quasar 自身的 CLI 之外的不同场景中使用 Quasar,然后查看不同的 Quasar 特色功能。或者,如果你希望继续使用 Quasar CLI,请查看不同的构建模式 从 SSR 开始,请务必不要遗漏在 应用扩展 上推出。
¥Advanced Vue Dev - You might want to use Quasar in different scenarios outside of Quasar’s own CLI, then check out the different Quasar Flavours. Or, if you wish to stick with the Quasar CLI, check out the different build modes, starting with SSR and please be sure not to miss out on App Extensions.