Quasar框架的入门教程

DebugUsery
2,143 阅读7分钟

Quasar框架入门

Quasar框架是一个基于Vue.js的框架，用于使用一个代码库开发跨平台的应用程序。这有助于节省开发成本。

Quasar提供了一个尖端的用户界面，并支持构建。

  • 单页应用程序。
  • 渐进式网络应用程序。
  • 服务器端渲染。
  • 使用Cordova或 capacitor的移动应用程序（Ios 和 android）。
  • 使用Electron的多平台桌面应用程序。
  • 浏览器扩展。使用Quasar的开销是最小的，因为它实现了开箱即用的网络开发的最佳实践。这些实践包括搜索引擎优化、图像压缩和移动响应性。它还拥有几乎所有网络开发需要的组件。

前提条件

要跟上本教程，你将需要

  1. 对Vue.js有一定了解。
  2. Node.js 10.x或更新版本，不包括13和15。这些版本没有经过Quasar的测试。
  3. Npm 5.10或更新版本/yarn 1.2或更新版本。

安装Quasar框架

我们可以通过以下三种方式来安装Quasar。在本教程中，我们将使用第三种方法；using Quasar CLI ，它带有所有Quasar开箱即用的功能。你可以跳过前两种，以后再试。

1.通过CDN嵌入到一个现有的项目中，如下图所示。

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <!-- Add  at the end of your body tag -->  
    <script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/quasar@1.15.6/dist/quasar.umd.min.js"></script>
    
    <script>
      new Vue({
        el: '#q-app',
        data: function () {
          return {}
        },
        methods: {},
      })
    </script>
  </body>
</html>

在你的body标签中，你应该在一个id为q-app 的div中使用Quasar组件，如下图所示。

 <div id="q-app"> ... </div>

不要使用自闭标签，如<q-list /> ，而是使用<q-list></q-list> 。

注意：这不是最好的做法，因为你必须确保将所有与Quasar相关的标签与你所安装的版本相匹配。在上面的<script> ，我们使用了版本@1.15.6 。最后，不要忘记在文档的开头添加<!DOCTYPE html> 。这是因为有些浏览器如Safari会有兼容性问题，如破坏了flex。

2.使用Vue CLI Quasar插件进行安装

要通过Vue CLI插件与Quasar一起工作，请确保在全球范围内安装@vue/cli 。确保你至少有3个版本。使用下面的命令检查版本。

$ vue --version

如果你有Vue CLI 2.x.x，运行下面的命令来卸载它。

$ npm uninstall -g vue-cli

如果你使用yarn，运行。

$ yarn global remove vue-cli

现在用下面的命令安装Vue CLI（4+）。

$ npm install -g @vue/cli

如果你使用yarn，请运行。

$ yarn global add @vue/cli

要创建一个项目，运行下面的命令。

$ vue create my-app

确保在安装时从vue CLI功能列表提示中选择babel。

❯ Default ([Vue 2] babel, eslint)

要添加Vue CLI Quasar插件，请浏览已创建的项目并运行：vue add quasar 来添加Quasar插件。

$ cd my-app
$ vue add quasar

CLI会提示你替换一些现有文件。你应该接受这一点，然后继续挑选你需要的Quasar插件的功能。这可能不是安装quasar的最佳方法，因为你将无法使用Quasar CLI提供的一些功能。此外，Quasar没有经过这些插件的测试。

3.使用Quasar CLI进行安装

在我们安装Quasar之前，首先检查Quasar CLI是否在您的电脑上全局安装。

使用终端运行。

$ quasar -v

如果你得到一个command not found ，运行下面的命令来安装它。

$ npm install -g @quasar/cli

如果您使用的是yarn，请运行。

$ yarn global add @quasar/cli

用Quasar创建一个Hello World应用程序

要创建一个新的Quasar应用程序，运行下面的命令。

$ quasar create hello-world-app

hello-world-app 将是你的项目的名称。点击回车键，接受默认的项目细节，或者根据你的喜好编辑它们。使用方向键选择第一个CSS预处理器。

❯ Sass with SCSS syntax (recommended)
  Sass with SCSS syntax (recommended)
  Sass with indented syntax (recommended)
  Stylus (deprecated)
  None (the others will still be available)

选择Auto-import-in-use Quasar Components ，然后点击Enter。

? Pick a Quasar components & directives import strategy
❯ * Auto-import in-use Quasar components & directives
    - also treeshakes Quasar; minimum bundle size
  * Import everything from Quasar
    - not treeshaking Quasar; biggest bundle size

然后按空格键，取消对ESLint功能的选择。我们在这里将不需要它。按回车键。

❯ (*) ESLint (recommended)

最后，用方向键选择yarn。这是我们在开发过程中要使用的，如果你喜欢，你可以使用npm。

❯ Yes, use Yarn (recommended)

导航到创建的hello-world-app ，并通过运行命令为应用程序服务。

$ cd hello-world-app
$ quasar dev

为应用程序提供服务后，在你的浏览器中打开URL：http://localhost:8080/#/，查看应用程序。你会看到Quasar标志和页面中央的 "Quasar "名称。在你选择的编辑器中打开创建的hello-world-app 文件夹。导航到src 文件夹，打开App.vue 。你会看到一个ID为q-app的div。

<div id="q-app">

这是Quasar应用程序被注入到项目中的地方，使用的是idq-app 。导航到src/layouts 文件夹，打开文件：MainLayout.vue 。在这里，我们将把应用程序的标题重命名为 "Hello World App"。如果一切正常，你会看到名称的改变反映在应用程序顶部的工具栏上。工具栏的标题标签看起来像这样。

<q-toolbar-title> Hello World App </q-toolbar-title>

你可以删除q-toolbar-title 后的下一个div来删除Quasar版本。

<div>Quasar v{{ $q.version }}</div>

MainLayout.vue 文件还包含了应用程序的导航链接。当你的应用程序变大时，你将在这里放置导航链接。现在，链接组件，也就是components/EssentialLink.vue ，被导入到MainLayout.vue 文件中。

linksData 数组中的数据然后在导入的EssentialLink 组件中循环使用，并显示在应用程序的左侧抽屉中。如果你不明白，不要担心，只要稍加练习，你就能掌握它。现在，导航到src/pages 文件夹，打开Index.vue 。你可以删除整个图像标签，看起来像这样。

<img alt="Quasar logo" src="~assets/quasar-logo-full.svg">

这将从应用程序的中心删除图像和名称："Quasar"，让应用程序为其他组件做好准备。

熟悉组件的结构

在这里，我们要建立一个组件。就像Vue.js一样，Quasar使用单文件组件（SFC）结构。一个SFC有3个部分；HTML、SCRIPT（JS）和STYLE（CSS）。

<template> 标签代表HTML，<script> 标签代表JavaScript，<style> 标签代表CSS。这些标签应该在一个文件中。如果你有构建Vue.js应用程序的知识，这应该是一件轻而易举的事。在components 文件夹中创建一个名为Country.vue 的文件。它具有像Vue一样的SFC结构。在HTML部分添加以下代码。

<template>
  <div>
    {{ name }}
  </div>
</template>

我们打算在根页面中显示一个国家的名称。在<script> ，添加以下代码。

export default {
  name: "Country",
  data () {
      return {
        name: 'Kenya'
      }
  }
}

<style> 标签应保持原样。现在在pages/Index.vue 文件中，导入Country 组件。<script> 标签应如下所示。

import Country from "../components/Country";
export default {
  name: 'PageIndex',
  components: {Country}
}

html部分应该如下图所示。

<template>
  <q-page class="flex justify-start">
        <div>
          <Country />
        </div>
  </q-page>
</template>

国家的名称。"肯尼亚"，出现在页面的左上方。这就是创建一个组件的简单过程。这个组件也可以在其他组件中重复使用。

选择Quasar的优点

以下是选择Quasar框架的一些优点。

1.支持多平台

这是Quasar最令人兴奋的功能。它只用一个代码库就可以支持多个平台的构建。这是一个非常巨大的优势，因为它节省了应用程序的开发成本和时间。它支持单页应用、渐进式网络应用等的构建。

2.快速上手

尽管Quasar带有很多技术，使其成为一个完整的整体，如Webpack、Cordova等。你将只需要学习Vue.js，它的学习曲线很浅。

其他技术都是在Quasar中集成和配置的。因此，你不需要了解它们。此外，它有一个最好的详细文档。

3.自动树状分析

通过树形摇动，你可以在你的应用程序中只导入需要的组件。Quasar提供了开箱即用的树形处理功能。记住，在安装hello-world-app ，我们被提示Pick a Quasar components & directives import strategy?我们选择了第一个。

❯ * Auto-import in-use Quasar components & directives
    - also treeshakes Quasar; minimum bundle size
  * Import everything from Quasar
    - not treeshaking Quasar; biggest bundle size

这就指示Quasar只导入我们需要的组件，而不是整个Quasar，从而节省了我们应用程序的捆绑大小。

4.对RTL语言的支持

对Quasar组件和开发者自己的代码都支持RTL（从右到左）。如果使用了RTL语言包，它可以自动将开发者编写的网站或应用程序的CSS代码转换为RTL。

5.实施网络开发的最佳实践。

网络开发的最佳实践是开箱即用的；其功能包括缓存破坏、源映射、代码分割、懒惰加载和HTML、CSS、JS最小化。我们也鼓励Quasar开发人员在网络开发中实施最佳实践。

6.大量的语言包

Quasar开箱即有超过40种语言包。

选择Quasar的缺点

1.它是由一个人开发的

唯一的缺点是，它是由一个人开发的。这可能会导致开发者重新考虑该框架的未来。

总结

我们只是用Quasar框架创建了一个简单的应用程序。你可以用它创建更大的企业应用。

Quasar倾向于带来一个更好的开发环境，并认为不应该像过去几十年那样（像他们那样）做所有的事情。

avatar
文章
阅读
粉丝