入门 - 安装
如果您想了解Quasar是什么以及它可以为您做什么,请阅读Quasar介绍。否则,让我们开始吧,选择你想要如何使用Quasar:
- UMD / Standalone(通过CDN嵌入现有项目,逐步整合)
- Quasar CLI处理入门套件(推荐)
- Vue CLI 3 插件
这是一个比较:
特征 | 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 |
你完成了。检查在新文件夹中创建的index.html
文件,并了解如何嵌入Quasar。您可能需要重复上述步骤,根据您给出的答案尝试不同的设置。
现在开始阅读UMD / Standalone。
入门套件(推荐)
如果你想能够构建:
- SPA(单页应用程序/网站),
- 一个PWA(Progressive Web App),
- 一个移动APP(通过Cordova),
- 一个Electron应用,
…和 - 受益于Quasar CLI提供的卓越体验,带有HMR(热模块重载)
- 为所有这些模式共享相同的基本代码
- 受益于最新网络推荐的开箱即用实践
- 编写ES6代码的能力
- 受益于Tree Shaking
- 以最佳方式优化,压缩,打包您的代码
- 编写SFC的能力(单个文件组件 - 基于Vue)
…那么使用入门套件的方式:
首先,我们安装Quasar CLI。确保你的机器上安装了Node> = 8和NPM> = 5。
#确保你在全局安装了vue-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配置(在package.json或vue.config.js文件中,取决于你在创建vue应用程序时选择的内容)也将包含一个quasar
对象。 最重要的属性是theme
(可能的值为“mat”或“ios”),您可以随后根据需要进行更改。