升级指南

我们将介绍如何在项目中升级到一个新的Quasar版本，不管是UMD还是使用Starter Kit。 然后我们将继续讨论如何将v0.15迁移到v0.16，将v0.15之前的项目迁移到v0.15+。

升级到一个新的Quasar版本

这适用于从v0.15+版本升级到较新的v0.15版本, 包括0.16。

重要
Quasar v0.15 +需要Node.js 8.9.0或更高版本

UMD

只需将所有引用Quasar的CSS和JS标签中的版本字符串替换为较新的版本即可。

入门套件

正如你可能已经注意到的那样，你项目中唯一的依赖项（除非你已经安装了linter或者你自己的代码）是quasar-cli。 所有你需要的是更新这个依赖。

$ yarn add --dev quasar-cli@latest
# 或:
$ npm install --save-dev quasar-cli@latest

Quasar CLI安装在全局和本地。当您发出Quasar命令时，在项目中本地安装Quasar CLI将不会全局安装。这允许您跳过在package.json中写npm脚本（用于Quasar命令）的步骤，还允许您在多个项目中运行不同的Quasar版本。

注意Quasar CLI版本。这与Quasar版本不一样。输入$ quasar info。所有你需要知道的是Quasar CLI版本的主要和次要部分都与Quasar版本相匹配。因此作为例子，安装最新的Quasar CLI v0.15.x将确保您使用最新的Quasar v0.15.x.在使用v0.15.x时，不会发生重大更改，因此您可以安全（推荐）升级到最新的Quasar CLI，因为它已发布。

警告
有时在你用npm安装一个软件包，甚至更新当前的软件包之后，npm可能会搞砸了。你会得到一些缺失的软件包而你需要安装它们。在这种情况下，请删除node_modules和package-lock.json,并再次npm install。
yarn也一样。 如果出现错误，请删除node_modules和yarn.lock，然后重新安装。

将v0.15升级到v0.16

Quasar v0.15.x和v0.16之间的差异很小。如下所示，没有重大变化。设置Quasar版本的唯一原因是使用Quasar CLI保持一致性（相同的主要版本+次要版本）（其中有一个重要的更新：webpack 4、babel 7、Workbox、electron-builder支持，ionicons v4等等）。

如果您使用的是Quasar CLI，那么从v0.15.x升级应该是无缝的 - 这将指导您对项目文件夹进行一些小的更改。请注意，Ionicons v4有重大更改，因此如果您在项目中使用它，则需要将每个此类图标更新为其新名称。

如果您遇到任何问题，您的npm模块中可能存在冲突。它可以是babel、webpack或者eslint。控制台消息将告诉您更多有关错误的信息。

请记住，您将使用Webpack 4，因此您的所有webpack插件必须与之兼容。例如，如果已经在package.json中将它作为dev依赖项，则需要升级到更新的eslint-loader，babel-eslint等软件包。

如果您正在使用ESLint，请确保在package.json中包含这些内容（需要最低版本）：

"babel-eslint": "^8.2.1",
"eslint": "^4.18.2",
"eslint-config-standard": "^11.0.0",
"eslint-friendly-formatter": "^4.0.1",
"eslint-loader": "^2.0.0",
"eslint-plugin-import": "^2.9.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.7.0",
"eslint-plugin-standard": "^3.0.1",
"eslint-plugin-vue": "^4.3.0",

如果你在运行quasar dev时看到babel问题，那么你可能已经安装了一个使用babel-core而不是@babel/core的软件包 - 例如cypress-vue-unit-test。要找出它是哪一个，运行：npm ls babel-core然后删除有问题的来源。

# cd into project folder
$ rm yarn.lock                       # or: package-lock.json (if installed through npm)
$ rm -rf node_modules/
$ yarn global add quasar-cli@latest  # or: npm install --global quasar-cli@latest
$ yarn add --dev quasar-cli@latest   # or: npm install --save-dev quasar-cli@latest
$ yarn                               # or: npm install

突破性变化：

• QIcon：出于性能原因删除了“mat”和“ios”属性（使用:name="$q.theme === 'mat' ? val : otherVal"代替）
• 删除了utils>dom>viewport()方法（改用window.innerHeight/innerWidth）
• 更新了设置为Ionicons v4的Quasar ionicons - 与quasar-extras@2.0兼容

在v0.15之前版本升级到Quasar v0.15 +

v0.15版本完成了很多工作。 从头开始重新编写了Quasar CLI，以实现出色的开发体验（移动APP和Electron开发人员将会爱上它！）。为了处理网站，PWA，移动APP和Electron应用，只需要一个入门套件。构建其中的任何一个都只是为dev/build命令添加一个参数。

此外，您现在可以使用Quasar的UMD/standalone版本嵌入现有项目。不需要构建步骤。

花一些时间再次阅读所有“指南”页面。它将帮助您了解Quasar v0.15的真正功能以及您可以用它做什么。

那么，什么是新的，什么改变了？一切都被打磨了。增强功能和新功能的完整列表令人筋疲力尽。我们将尽力只涵盖主要部分。这只是让你开始的一个指南，这样你就可以知道在哪些文档中查找已经改变的内容。

第一步 - 使用入门套件时

首先，我们确保更新全局安装的Quasar版本（至少需要v0.15）。 然后我们创建一个新的项目文件夹：

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

# 然后我们用Quasar CLI创建一个项目文件夹：
$ quasar init <folder_name>

观察新的项目结构。考虑到这是极为优越的结构，请开始将原有文件移植到新的项目文件夹中。 使用新的入门工具包可以让您充分利用未来的无缝升级！无论如何，请不要简单地将您的/src文件夹复制到新的入门套件中。

不再需要构建配置

您会注意到新的入门套件没有提供/build或/config文件夹。他们不再需要。现在可以通过/quasar.conf.js轻松配置所有东西。你不需要知道Webpack。 更多信息。

没有main.js？

是。它不再存在，因为你不再需要它了。有关初始化代码和将代码库导入到您的网站/应用程序，请阅读App插件。

导入组件/指令/等

您不再需要在应用程序的任何位置导入Quasar组件和指令。只需在framework对象中配置/quasar.conf.js即可。 更多信息。

Quasar插件？

是的，这指的是操作表，通知（Toast和Alert的替代），LocalStorage/SessionStorage等等。它们可以在全局或Vue的$q对象注入下使用，并且需要在/quasar.conf.js> framework> plugins中指定才能使它们可用。

改动

• 排版
• Flex CSS gutter类
• QLayout&co。你会喜欢这些新功能！一定要一探究竟。语法和灵活性方面的重大改进。一些突破性变化，如不再使用插槽。
• QBtn（新功能！）
• QToolbar（关于按钮的小更新）
• QBreadcrumbs（强大的组件而不仅仅是CSS）
• QPagination（主要改进）
• QCollapsible（强大的新功能！）
• QTable（替换QDataTable - 现在完全定制！）
• 列表和列表项目 - 更多的选项，更好的控制，“黑暗”的主题
• QTree（最先进的和您所需要的！）
• ActionSheet（现在也作为Quasar插件&QActionSheet组件 - 也有新功能）
• 对话框（现在作为Quasar插件, 也称作QDialog组件, 具有无限的灵活性！ - 也具有新功能）
• QModal - 比以往更容易使用！现在有完整的v-model支持。
• QPopover&QTooltip - 新的动画，无需Vue引用（通过v-close-overlay指令）就能关闭，现在全面支持v-model
• 加载（现在作为Quasar插件）
• QCarousel - 更易于使用。完全可定制！
• 转换 - 不再需要QTransition！最小的开销，更好的性能。
• QAlert - 新功能
• QChat - 新功能
• TouchSwipe，TouchHold和TouchPan - 更好的实现，更多的控制。阅读这些指令的修饰符。
• AppFullscreen＆AppVisibility - 现在作为Quasar插件，具有可在Vue侦听器中使用的反应状态属性
• QUploader - 新功能和新设计

另请注意，QInlineDatetime已重命名为QDatetimePicker。

新组件或功能

• SpacingCSS类
• QTable - 它也在改动列表中，但它在这里肯定也有一席之地。为下面更高等级数据表做准备。现在完全自定义！看看演示。
• QEditor - Quasar自己的所见即所得的编辑器！仅此一项就应该有其自己的部分。
• Notify - Toast和Alert之间的合并，具有灵活的定位和优秀的动画。
• QColor - 拾色器！
• 新的按钮类型：QBtnGroup和QBtnDropdown
• QBtnToggle - 类似单选框的组件，但带有按钮

Quasar组件的I18n

请务必查看Quasar Components的国际化。

图标包

您现在可以告诉Quasar为其组件使用Fontawesome，Ionicons，MDI或Material Icons之一。您不再需要包含Material 图标。您可以将这些包中的任何一个用作默认包。

另外，Fontawesome图标的小改动：

<!-- v0.15以前 -->
<q-icon name="fa-paypal fab" />

<!-- v0.15+ -->
<!-- 现在复制粘贴fontawesome图标类，因为它在fontawesome文档中 -->
<q-icon name="fab fa-paypal" />

Vue原型注入

您可以使用$q方便注入，访问Quasar主题，Quasar I18n，Quasar平台等等。 Quasar插件为其添加功能。阅读文档页，特别是如果您构建Cordova或Electron应用程序。

什么被丢弃？

• 全局事件总线（事件） - 不再需要。改用Vue根组件事件。 更多信息
• QFixedPosition - 现在由更强大的QPageSticky取代
• QSideLink - 不再需要！只需使用一个QItem或任何你想要的组件，并绑定一个@click="$router.push(...)"。
• Alert和Toast作为方法。他们已被合并到Notify中。
• HTML表格。但是，您可以检查v0.14中的代码并将其嵌入到您的应用中。
• 图片库 - 不再需要。新的QCarousel功能非常强大，您将立即看到切换到它的好处。
• QTransition - 不再需要。只需使用Vue的<(或`)代替。 更多信息
• QDatetimeRange - 这个组件根本就不再需要; 轻松简单地编写两个QDatetime，让你具有充分的灵活性。

新布局

以下升级指南对QLayout几乎没有什么改变，但它是一个起点。

<!-- v0.14 -->
<q-layout ref="layout" view="hHr LpR lFf" :right-breakpoint="1100">
  <!-- 页眉 -->
  <q-toolbar slot="header">
    <q-btn flat @click="$refs.layout.toggleLeft()">
      <q-icon name="menu" />
    </q-btn>
    <q-toolbar-title>
      Layout Header
      <span slot="subtitle">Optional subtitle</span>
    </q-toolbar-title>
    <q-btn flat @click="$refs.layout.toggleRight()">
      <q-icon name="menu" />
    </q-btn>
  </q-toolbar>

  <!-- 导航 -->
  <q-tabs slot="navigation">
    <q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar" />
    <q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs" />
    <q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer" />
  </q-tabs>

  <!-- 左侧面板 -->
  <div slot="left">
    <q-list no-border link inset-separator>
      <q-list-header>Essential Links</q-list-header>
      <q-side-link item to="/docs">
        <q-item-side icon="school" />
        <q-item-main label="Docs" sublabel="quasar-framework.org" />
      </q-side-link>
    </q-list>
  </div>

  <!-- 右侧面板 -->
  <div slot="right">
    Right Side of Layout
  </div>

  <!-- 子路由在这里注入： -->
  <router-view />

  <!-- 页脚 -->
  <q-toolbar slot="footer">
    <q-toolbar-title>
      Layout Footer
    </q-toolbar-title>
  </q-toolbar>
</q-layout>

我们将其升级到v0.15+。 请注意，为了让我们将导航标签放置在页眉（用于Material）和页脚（用于iOS）上，我们还编写了NavTabs组件。 注意没有插槽、没有QSideLink、“扁圆密集”按钮、左/右滑板上的v-model，QLayout *组件：

<!-- layout component -->

<q-layout ref="layout" view="hHr LpR lFf">
  <!-- Header -->
  <q-layout-header>
    <q-toolbar>
      <q-btn flat round dense icon="menu" @click="leftSide = !leftSide" />
      <q-toolbar-title>
        Layout Header
        <span slot="subtitle">Optional subtitle</span>
      </q-toolbar-title>
      <q-btn flat round dense icon="menu" @click="rightSide = !rightSide" />

    </q-toolbar>

    <!-- Navigation for Material theme -->
    <nav-tabs v-if="$q.theme === 'mat'" />
  </q-layout-header>

  <!-- Left Side Panel -->
  <q-layout-drawer v-model="leftSide" side="left">
    <q-list no-border link inset-separator>
      <q-list-header>Essential Links</q-list-header>
      <q-item to="/docs">
        <q-item-side icon="school" />
        <q-item-main label="Docs" sublabel="quasar-framework.org" />
      </q-item>
    </q-list>
  </q-layout-drawer>

  <!-- Right Side Panel -->
  <q-layout-drawer v-model="rightSide" side="right" :breakpoint="1100">
    Right Side of Layout
  </q-layout-drawer>

  <!-- sub-routes get injected here: -->
  <q-page-container>
    <router-view />
  </q-page-container>

  <!-- Footer -->
  <q-layout-footer>
    <!-- Navigation for iOS theme -->
    <nav-tabs v-if="$q.theme === 'ios'" />
    ...
  </q-layout-footer>
</q-layout>

<!-- nav-tabs component -->
<q-tabs>
  <q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About" />
  <q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar" />
  <q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs" />
  <q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer" />
</q-tabs>

表单组件

在之前的版本中，您会监听@change事件来检测更改。 现在，您可以监听@input做立即更新或监听@change做 懒惰更新**。 Vue支持的v-model.lazy是一个待处理的更改，因此在此之前您可以使用等效的表单（详看以下说明）。

<!-- QInput example -->

<!-- same as listening for @input -->
<q-input v-model="myModel" />

<!-- listening for lazy update -->
<q-input :value="myModel" @change="val => { myModel = val }" />

你会注意到所有的表单组件都变优雅了。此外，你会惊喜地发现新的属性。仅举几个例子： “hide-underline”, “inverted-light”, “dark” or “warning” （用于突出显示警告状态）。

在v0.15之前，表单组件具有默认边界。这被删除，以便更容易定制。你现在可以使用新的间距CSS类来完成它。

QCheckbox现在也支持不确定状态。您可以为“true”/“false”/“indeterminate”状态指定一个值，因此它不再仅适用于布尔值（或数组）。

使用Popovers时，QDatetime现在不需要“设置”按钮。点击日期将简单地选择它并关闭弹出窗口。

QChipsInput（和QChips）有新的属性，可以更好地定制。

使用Promises

模态框，Popovers，工具提示，布局滑板，对话框，通知（仅举几例）现在使用Promises而不是采用回调参数。这使您可以享受async/await的好处并简化代码。

methods: {
  async showNotify () {
    await this.$q.dialog('Some dialog...')
    console.log('Dialog has been closed')
  }
}

Vue refs不再需要很多组件

你也习惯于为几个组件使用Vue引用（布局左/右滑板，模态框，…）。 这不再是必要的。 您可以使用“v-model”来显示（打开）/隐藏（关闭）它们。 这在v0.15之前是不太可能的，因为你需要关闭它们以离开（作为例子）。 现在不再需要它了，所以一个布尔范围的变量就足够了。

一些组件现在需要事件的.native修饰符

某些组件，如QItem或QCard&co现在需要.native修饰符来绑定到像click这样的原生DOM事件。 一般的规则是：如果组件的文档Vue Events部分没有提及@click，那么你需要使用native修饰符。

<!-- prior to v0.15 -->
<q-item @click="...">....</q-item>

<!-- v0.15+ way: -->
<q-item @click.native="...">...</q-item>

一些Quasar组件是功能类型的。这些传递原生事件，因此不需要添加原生修改器。但是，在彻底的基准测试期间，由于许多原因，将这些作为常规组件意味着更好的性能。在您需要使用原生修改器的地方,会添加将这些组件从功能切换到常规这个变动。

在开发和生产环境我们使用不同的env

你还可以！由于/quasar.conf.js功能，现在只是更好一些。 请查看详细信息

新指令：v-close-overlay

使用弹出窗口的所有组件，例如模态框，对话框，弹出窗口，上下文菜单，现在都支持关闭它们的简化方法。而不是使用Vue引用，这对于某些用例来说很麻烦，您可以简单地向要关闭弹出框的元素/组件添加“v-close-overlay”。该指令侦听“@click”事件，确定第一个父弹出组件并关闭它。

<q-btn label="I got a Popover">
  <q-popover>
    ...
    <q-icon v-close-overlay name="close" />
    ...
  </q-popover>
</q-btn>

处理后退按钮

不幸的是，自动处理后退按钮是一个极难理解的功能之一。 它需要你处理Vue引用（Vue上的初学者一直在努力），并没有完全允许你以简单的方式连接像Drawers&Modals这样的组件。 现在它只适用于移动APP（例如Android有一个由Quasar处理的后退按钮）。 为网站删除此功能可以大大简化您的代码：

<q-modal v-model="modal">...</q-modal>
<q-btn label="Open modal" @click="modal = true" />

按钮

虽然QBtn仍允许您将图标和标签指定为子节点，但现在建议您使用“icon”和“label”属性代替：

<q-btn icon="map" label="See map" />

<!-- instead of old: -->
<q-btn>
  <q-icon class="on-left" name="map" />
  See map
</q-btn>

一定要检查出新的按钮类型和道具。

Quasar CLI和Pre-0.15应用程序

Quasar CLI v0.15+与0.15之前的应用程序不兼容。 您可以通过添加quasar-cli作为开发依赖，在全局范围内安装最新的CLI，同时仍然支持传统应用中的quasar命令。 要支持0.14及更早版本，您需要quasar-cli v0.6.5。

$ yarn add --dev quasar-cli@0.6.5
# 或:
$ npm install --save-dev quasar-cli@0.6.5

这会将传统的quasarCLI工具添加到您的项目./node_modules/.bin/目录中。

使用npx工具（自动安装在npm旁边）从本地node模块运行quasar。 例如：

$ npx quasar dev