入门 - 安装

如果您想了解Quasar是什么以及它可以为您做什么,请阅读Quasar介绍。否则,让我们开始吧,选择你想要如何使用Quasar:

这是一个比较:

特征 UMD 入门套件 Vue CLI 3 插件
能够嵌入到现有项目中 - 是的,如果它是Vue CLI应用
逐渐整合Quasar - -
能够使用CDN - -
构建SPA,PWA
构建移动应用,桌面应用 -
对Quasar组件的动态RTL支持
通过Quasar自动生成您自己的网站/应用RTL等效的CSS规则 -
利用Quasar CLI提供卓越的开发者体验 - -
Tree Shaking -
SFC(单个文件组件 - 用于Vue) -
通过动态的quasar.conf.js进行高级配置 - -
单元&端对端测试 - 尚未支持

如果您从以前的Quasar版本升级,请选择升级指南

UMD / Standalone(使用CDN)

如果您想将Quasar嵌入到您现有的网站项目中,并以渐进的方式进行整合,那么请选择UMD / Standalone(统一模块定义)版本。有一个UMD入门套件,将向您展示如何开始以及将什么CSS和JS标签包含到您的项目中。它会问你一些问题(你将使用什么Quasar主题,包括什么Quasar I18n,…),它将生成一个简单的HTML文件,演示如何使用CDN添加Quasar:

# 确保你在全局安装了vue-cli
# Node.js> = 8.9.0是必需的。

$ yarn global add vue-cli
# 或:
$ npm install -g vue-cli

# 然后...
$ vue init quasarframework / quasar-starter-kit-umd <文件夹名称>

你完成了。检查在新文件夹中创建的index.html文件,并了解如何嵌入Quasar。您可能需要重复上述步骤,根据您给出的答案尝试不同的设置。

现在开始阅读UMD / Standalone

入门套件(推荐)

如果你想能够构建:

首先,我们安装Quasar CLI。确保你的机器上安装了Node> = 8和NPM> = 5。

#确保你在全局安装了vue-cli
$ yarn global add vue-cli
# 或:
$ npm install -g vue-cli

#Node.js> = 8.9.0是必需的。
$ yarn global add quasar-cli
# 或:
$ npm install -g quasar-cli

然后我们用Quasar CLI创建一个项目文件夹:

$ quasar init <文件夹名称>

请注意,如果要构建上述任何选项,不需要单独的入门套件。Quasar CLI可以全部处理。

现在开始阅读主入门套件,并熟悉Quasar CLI

Vue CLI 3 插件

确保你有vue-cli 3.x.x:

vue --version

如果您还没有使用vue-cli 3.x创建的项目:

vue create my-app

导航到新创建的项目文件夹并添加cli插件。 在安装之前,如果您希望以后还原它们,请确保提交当前更改。

cd my-app
vue add quasar

它会询问您是否希望插件替换某些现有文件。 如果您希望有一个示例,建议您这样做,以便快速开发您的应用程序。

你的Vue配置(在package.json或vue.config.js文件中,取决于你在创建vue应用程序时选择的内容)也将包含一个quasar对象。 最重要的属性是theme(可能的值为“mat”或“ios”),您可以随后根据需要进行更改。