视频指南

New

点击下面的海报将打开一个Youtube播放列表，介绍将Quasar CLI项目从Quasar v1升级到Quasar v2的过程。 随着Quasar v2的进展，它可能会变得不同步，但它可以帮助你开始。

launch

较早的V2版到最新的V2版

使用UMD

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

使用Quasar CLI

# run these commands inside
# of a Quasar UI v2 project

# check for upgradable packages
$ quasar upgrade

# do the actual upgrade
$ quasar upgrade --install

建议也保持vue和vue-router软件包的更新：

# optional, but recommended
$ yarn add vue@3 vue-router@4

使用Quasar Vite插件

$ yarn upgrade quasar

另外，你可能还想确保你有最新的@quasar/vit-plugin包。

建议保持vue'和@quasar/extras’的软件包也是最新的：

# optional, but recommended
$ yarn add vue@3 @quasar/extras@latest

使用Vue CLI

$ yarn upgrade quasar

另外，你可能还想确保你有最新的vue-cli-plugin-quasar包。

建议保持vue'和@quasar/extras’的软件包也是最新的：

# optional, but recommended
$ yarn add vue@3 @quasar/extras@latest

从v1迁移到v2

本指南指的是Quasar CLI和UMD项目，但这里的信息也可以用于Vue CLI。对于已经在项目中使用Vue CLI的开发者，你可以查看如何安装vue-cli-plugin-quasar包，它可以与Quasar v2一起使用。 你还需要对你的main.js做一些修改（同时升级你的Vue CLI项目以支持Vue 3）（目前最好的方法是为Vue 3生成一个新的Vue CLI项目，然后按照vue-cli-plugin的安装步骤，查看该/src文件夹发生的变化，然后对你目前的Vue CLI项目应用同样的原则）。

介绍

我们做了大量的工作，所以从Quasar v1到v2的过渡是尽可能的无痛。不要因为这个页面的长度而感到害怕，因为它并没有反映出你需要为升级你的应用程序到Quasar v2所付出的努力（我们只是想让它尽可能的完整）。Quasar组件、指令和插件的API有细微的变化，但我们把破坏性的变化控制在最低限度。我们还为一些组件添加了一些新的很酷的功能。

Quasar UI v2是基于Vue 3的，而之前的版本是基于Vue 2的。这意味着你的应用程序代码（Vue组件、指令等）也应该符合Vue 3，而不仅仅是Quasar UI的源代码。如果你在你的应用程序中使用其他库，请确保你使用的是Vue 3版本。

Quasar UI v2不仅仅是对Vue 3和Composition API的移植。__在Quasar的算法中也有很多显著的性能提升！__你会喜欢它的。

在你开始将你的项目从v1升级到v2的旅程之前，你应该知道一些额外的事情。

1. 在Discord服务器或论坛上提问之前，请阅读文档。 2）准备一个CodePen，这样工作人员就可以帮助你，如果你认为你发现了一个问题。
2. 深入研究Quasar源代码（它将帮助你理解框架，并教你使用Vue编程的最佳实践）。
3. 除非有必要，否则不要使用框架组件作为mixins（如果需要的话，请将它们封装起来）。 5）除非绝对必要，不要用CSS选择器来定位内部组件的东西。
4. 我们尽可能地推荐yarn，因为它的速度和使用效率。然而，当使用globals时，我们仍然推荐使用npm，特别是当你使用nvm（Node版本管理器）时。
5. 使用git进行版本库管理，并定期提交，这就像在过程中做笔记一样，让你在遇到困难时恢复到以前的状态。
6. 使用Quasar启动文件，用于任何预挂载的应用程序例程。
7. 最后，成为支持者/赞助者，可以进入特殊的Discord支持聊天室，获得优先支持。这也有助于项目的生存。

如果你被卡住了，请查看论坛或访问我们的Discord服务器，以获得帮助，这不仅来自工作人员，也来自社区。

初始步骤

你有两条路可以走。它们描述如下。选择最适合你需要的途径。然而，我们推荐第一个选项。

选项1：转换一个项目

在开始之前，强烈建议对你当前的工作项目进行复制，或者用git创建一个新的分支。

1. 确保你有最新的@quasar/cli:

$ yarn global add @quasar/cli@latest
# or: npm i -g @quasar/cli@latest

2. 与Stylus有关。你在使用Stylus和Quasar Stylus变量吗？那么在做任何事情之前，请将所有这些文件转换为Sass/SCSS（包括 src/css/app.styl -> src/css/app.sass 或 app.scss）。如果你仍然想在你的项目中使用Stylus（没有Quasar Stylus变量），那么你还需要安装Stylus相关的软件包（这些软件包不再由"@quasar/app "开箱提供）:

 # 只有当你仍然想使用Stylus时（但没有Quasar Stylus变量）
$ yarn add --dev stylus stylus-loader

3. 升级 Node至少到12.22.1版本，npm至少到6.14.12版本，yarn至少到1.17.3版本。

# 如果你已经在使用lts/erbium版本（例如12.14.0），请注意它的版本，它应该被列在 "lts/erbium"行中
$ nvm list

# 如果你在Linux上使用`nvm`帮助器(https://github.com/nvm-sh/nvm)
$ nvm install 12.22.1 && nvm alias default lts/erbium && nvm use default
# 如果你在Windows上使用`nvm`帮助器(https://github.com/coreybutler/nvm-windows)
$ nvm install 12.22.1 && nvm use 12.22.1

# 卸载以前的 "lts/erbium"版本，我们假设在我们的例子中已经安装了 12.14.0
nvm卸载12.14.0

4. 删除文件夹.quasar、node_modules和package-lock.json或yarn.lock文件。这通常是不需要的，但在某些情况下，它将避免为了本指南的目的而yarn/npm升级软件包的麻烦。
5. 卸载：@quasar/app

$ yarn remove @quasar/app

6. 安装：@quasar/app-webpack v3, quasar v2, vue v3 和 vue-router v4 包（后两者不再由 @quasar/app 提供）。

$ yarn add --dev @quasar/app-webpack@3
$ yarn add quasar@2 vue@3 vue-router@4

7. 删除 .quasar和node_modules文件夹，以及package-lock.json/yarn.lock文件，然后运行npm install/yarn install来重新生成锁文件。这将强制升级整个依赖关系图（包括深度依赖），并避免不匹配的软件包的麻烦，特别是webpack 5相关的软件包。
8. 如果你正在使用ESLint，那么编辑/.eslintrc.js。

 // 老的写法
parserOptions: {
  parser: 'babel-eslint'
},
extends: [
  'plugin:vue/essential' // 或等同于
]

 // 新的写法
parserOptions: {
  parser: '@babel/eslint-parser'
},
extends: [
  'plugin:vue/vue3-essential' // 或等同于
]

同时升级ESLint deps。例子：

"@babel/eslint-parser": "^7.0.0", // replaces babel-eslint !
"eslint": "^7.14.0",
"eslint-config-standard": "^16.0.2",
"eslint-plugin-import": "^2.19.1",
"eslint-plugin-node": "^11.0.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-quasar": "^1.0.0",
"eslint-plugin-vue": "^7.0.0",
"eslint-webpack-plugin": "^2.4.0" // replaces eslint-loader !

在quasar.config.js中，在 "module.exports = function (ctx) "之前添加：

const ESLintPlugin = require('eslint-webpack-plugin')

在quasar.config.js -> build中添加：

chainWebpack (chain) {
  chain
    .plugin('eslint-webpack-plugin')
    .use(ESLintPlugin, [{ extensions: ['js', 'vue'] }])
}

9. 如果你使用Vuex，你将需要手动安装它：

$ yarn add vuex@4
# or
$ npm install vuex@4

10. 编辑quasar.config.js > framework > lang。它将在本页面的“Quasar语言包”部分进行解释。

// 老的写法
framework: {
  lang: 'en-us'
}

// 新的写法
framework: {
  lang: 'en-US'
}

11. 检查你所有手动安装的webpack插件是否与Webpack 5兼容（绝大部分应该已经兼容）。同时更新quasar.config.js > devServer config以匹配webpack-dev-server v4。
12. 按照指南的其余部分进行。你需要适应新版本的Vue 3、Vue Router 4、Vuex 4、Vue-i18n 9和你正在使用的任何其他vue插件的突破性变化。
13. 升级你的其他项目依赖（尤其是ESLint相关的）。

选项2：创建一个项目

第二个选择是创建一个新的项目，然后一点一点地移植到它。我们认为这个方案是最坏的情况（你遇到的是Vue 3和Vue Router v4的问题，而不是Quasar本身的问题），我们只是为了本指南的完整性而提到它。

你可以生成一个新的Quasar v2项目，如下图所示，然后你就可以把你的应用程序移植到它上面。

$ yarn create quasar
# pick "App with Quasar CLI" and "Quasar v2"
# decide if you want "Quasar CLI with Vite" (beta) or "Quasar CLI with Webpack"

Webpack v5

为了支持Node 13+（以及其他许多好处），我们已经将Webpack从v4升级到v5**。你可能需要相应地升级你的Webpack插件。

Nodejs polyfills

Webpack v5删除了用于网络客户端构建的Nodejs polyfills。如果你在网络客户端使用依赖Nodejs API的包（它们不应该这样做！），你会得到一些包丢失的错误提示。例如: Buffer、crypto、os、path。

这些需要由包的所有者来解决。但如果你不想等待，只想运行你的应用程序/网站（有一点风险），那么你可以手动安装node-polyfill-webpack-plugin（yarn add --dev node-polyfill-webpack-plugin），然后在quasar.conf.js > build > chainWebpack中引用它。例子:

// quasar.config.js
build: {
  chainWebpack (chain) {
    const nodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')
    chain.plugin('node-polyfill').use(nodePolyfillWebpackPlugin)
  }
}

Webpack devserver

作为升级到Webpack 5的一部分，Quasar CLI现在提供了webpack-dev-server v4和webpack-dev-middleware v4，它们都带有各自的突破性变化。这影响了quasar.conf.js > devServer选项。以下是一些最常用的属性:

webpack-chain

App.vue

你需要编辑src/App.vue并删除包装器<div id="q-app">。你不再（也不应该）需要它了。

<!-- 老写法 -->
<template>
  <div id="q-app">
    <router-view />
  </div>
</template>

<!-- 新写法 -->
<template>
  <router-view />
</template>

Vue 3

由于你也将切换到Vue 3，你最好在读完本迁移指南后**看看其迁移指南。

如果你使用.vue文件，你很可能会有一个相当容易的过渡，因为1）vue-loader（由@quasar/app提供）是解析SFC语法和指示Vue 3做什么的人，2）你仍然可以使用选项API（尽管我们建议你转换到更新更好的Composition API）。

我们建议你首先将你的项目转换到Quasar v2，同时保留Options API（因为你的组件已经是Options API的形式，你可能想先确保一切正常）。在这个过渡期之后，你可以将你所有的Vue组件转换为Composition API，但这绝不是一个要求。

伴随着Vue3，有一个Vue Router v4的新的主要版本，你应该注意到，它有自己的突破性变化。还有新的Vuex v4也是如此。

Vue 3 突破性变化的例子

The v-model

在处理Vue 3时，最重要的突破性变化之一是v-model的工作方式。它现在是model-value+@update:model-value组合的别名，而不是value+@input。这对所有使用v-model的Quasar组件都有影响。如果你在.vue文件中编写你的组件，那么你不需要担心这个问题，因为vue-loader会正确地为你翻译它。

此外，如果你从你的Vue组件中发出自定义事件，你将需要明确地指定它们，如下所示:

<script>
// 你的Vue组件；
// 我们假设从这个组件
// 发出 "ok "和 "myEvent "事件。

export default {
  // ...
  emits: [ 'ok', 'myEvent' ],
  // ...
}
</script>

The event bus methods

另一个突破性的变化是取消了事件总线的方法（$on, $once, $off, $emit）。然而，Quasar v2 (v2.8.4+)有一个本地的对应方法：EventBus util。

Vue Router v4

这是一个Vue 3生态系统上游的突破性变化。更新 src/router 文件以匹配 Vue Router v4 的 API。Vue Router v4有它自己的breakening changes。特别是注意下面我们是如何处理404错误的。

// 默认src/router/index.js内容:

import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router'
import routes from './routes'

export default function (/* { store, ssrContext } */) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory

  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes,

    // 保持原样，在quasar.config.js中进行修改！
    // quasar.config.js -> build -> vueRouterMode
    // quasar.config.js -> build -> publicPath
    history: createHistory(process.env.VUE_ROUTER_BASE)
  })

  return Router
}

// 默认src/router/routes.js内容:
const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/Index.vue') }
    ]
  },

  // 始终将此作为最后一项。
  // 但你也可以将其删除
  {
    path: '/:catchAll(.*)*',
    component: () => import('pages/Error404.vue')
  }
]

export default routes

如果你使用TypeScript，你必须用RouteRecordRaw替换RouteConfig接口值。

Vuex v4

你需要做的第一步是，你需要手动安装Vuex到你的应用程序。

$ yarn add vuex@4
# or:
$ npm install vuex@4

这是一个Vue 3生态系统上游的突破性变化。你需要更新src/store文件以匹配Vuex v4的API。注意从vuex导入的“createStore”以及它在下面例子中的用法。参考：Vuex从3.x迁移到4.0

// 默认src/store/index.js内容:
import { createStore } from 'vuex'
// import example from './module-example'

export default function (/* { ssrContext } */) {
  const Store = createStore({
    modules: {
      // example
    },

    // 启用严格模式（增加开销！），
    // 仅适用于开发模式和--debug构建。
    strict: process.env.DEBUGGING
  })

  return Store
}

Vue-i18n v9

这是一个Vue 3生态系统上游的突破性变化。更新src/boot/i18n.js文件以匹配Vue-i18n v9的 API。Vue-i18n有自己的突破性变化。

由于这个包不是由@quasar/app提供的，你必须通过yarn add vue-i18n更新你项目中的依赖关系。

// 默认 src/boot/i18n.js 内容：

import { createI18n } from 'vue-i18n'
import messages from 'src/i18n'
// 你还需要创建 src/i18n/index.js/.ts 文件

export default ({ app }) => {
  // Create I18n instance
  const i18n = createI18n({
    locale: 'en-US',
    globalInjection: true,
    messages
  })

  // Tell app to use the I18n instance
  app.use(i18n)
}

如果你使用TypeScript，移除现有的’vue/types/vue’的增强功能，因为它已经被整合到上游包中。

@vue/composition-api

如果你一直在使用Vue 2的Composition API包，你需要改变所有的import来指向Vue包。

// 老的, @vue/composition-api的写法
import { ref } from '@vue/composition-api'

// 新的Vue 3的写法
import { ref } from 'vue'

如果你使用的是被废弃的context.root对象，你必须重构你的代码以避免使用它，因为它已经不可用了。

删除src/boot/composition-api引导文件和quasar.config.js的相应条目。然后卸载@vue/composition-api包：

$ yarn remove @vue/composition-api

如果你使用TypeScript，准备多次重新加载VSCode，因为所有的升级都会导致types缓存问题。

Quasar组件

Vue 3 和 v-model

v-model现在是model-value+@update:model-value组合的别名，而不是value+@input。这对所有使用v-model的Quasar组件都有影响。如果你用.vue文件编写你的组件，那么你不需要担心这个问题，因为vue-loader会正确的为你翻译它。

建议：你可能想对:value和@input进行搜索和替换。请小心替换:value，因为有些组件（QLinearProgress, QCircularProgress）不与v-model绑定，仍然使用value作为属性。

Vue 3和作用域插槽

现在所有的槽的作用方式与Vue 2中的作用域插槽相同。如果你使用Options API，那么你可以对this.$scopedSlots进行搜索和替换（用this.$slots替换）。

QDrawer/QDialog/QMenu/QTooltip

对于上述Quasar组件，使用"class"和"style"属性而不是"content-class"/"content-style"属性。

QBtn/QItem/QBreadcrumbs/QRouteTab

新属性：href、target。

对于QBtn，在使用href属性时不再需要指定type="a"。

如果你不同时注入Vue Router，href属性对UMD特别有用。

QBtn/QRouteTab

如果你在你的@click处理程序中使用to属性并延迟导航:

// 老写法
function onClick (e, go) {
  e.navigate = false // <<<--- this changed
  // ...也许以后会调用go()?
}

// 新写法
function onClick (e, go) {
  e.preventDefault() // <<<--- this changed
  // ...也许以后会调用go()?
}

QBreadcrumbsEl

删除了"append"属性，因为Vue Router v4 也放弃了它。 增加了"tag"和"ripple"属性。

QColor

添加了"no-header-tabs"属性

QChatMessage

现在默认情况下，“label”、“name”、"text"和"stamp"都受到保护，不会受到XSS攻击。这意味着所有的*-sanitize属性都被放弃了，因为这种行为现在已经成为Quasar的标准。如果你想为这些属性显示HTML内容，你现在需要通过新的布尔道具（*-html）明确指定它们。

QDate

当@update:model-value事件（相当于以前的@input）被触发时，第一个参数的内容不再包含（废弃的）changed属性。

QDialog

增加了 “no-shake”、“transition-duration”。 使用 "class"和 "style"属性而不是 “content-class”/"content-style"属性

QExpansionItem

删除了"append"属性，因为Vue Router v4 也放弃了它。

(新)连接到QForm

如果你想创建你自己的Vue组件，需要连接到父级QForm（用于验证目的），我们已经为你提供了方便。

// Composition API 变体

import { useFormChild } from 'quasar'

useFormChild ({
  validate, // 返回一个布尔值的函数（或一个解析为布尔值的Promise）。
  resetValidation, // 重置验证的可选函数。
  requiresQForm // 布尔型 -- 如果为 "true"且你的组件
                // 没有被QForm封装，那么它将显示
                // 一个错误信息
})

//  一些组件
export default {
  setup () {
    // 必需的！应该返回一个布尔值
    function validate () {
      console.log('called my-comp.validate()')
      return true
    }

    function resetValidation () {
      // ...
    }

    useFormChild({ validate, resetValidation, requiresQForm: true })
  }
}

// Options API 变体

import { QFormChildMixin } from 'quasar'

// 一些组件
export default {
  mixins: [ QFormChildMixin ],

  methods: {
    // 必需的！应该返回一个布尔值
    validate () {
      console.log('called my-comp.validate()')
      return true
    },

    // 可选的
    resetValidation () {
      // ...
    }
  },

  // ...
}

QInnerLoading

增加了"label", “label-class” and "label-style"属性

QImg

这个组件已经从头开始重新设计了。它现在使用了一个更现代的API。其直接效果是，它使用的RAM内存更少，运行时间更快。

增加了属性：“loading”, “crossorigin”, “fit”, “no-spinner”, “no-native-menu”, “no-transition” 。 删除了属性: “transition”, “basic” (now equivalent to “no-spinner” + “no-transition”) 将属性 "no-default-spinner "改为 “no-spinner”。

详细的变化，请查看QImg页面上的API卡。

QPagination

增加"gutter"属性

QPopupEdit

在这个组件上已经做了一些性能改进，因此你现在需要使用默认的插槽。

<!-- old way -->
<q-popup-edit
  content-class="bg-primary text-white"
  buttons
  color="white"
  v-model="myModel"
>
  <q-input
    type="textarea"
    dark
    color="white"
    v-model="myModel"
    autofocus
  />
</q-popup-edit>

下面是新的方法。注意v-slot="scope"是直接应用在<q-popup-edit>上，并且使用scope.value而不是myModel作为内部<q-input>组件。

<q-popup-edit
  class="bg-primary text-white"
  buttons
  color="white"
  v-model="myModel"
  v-slot="scope"
>
  <q-input
    type="textarea"
    dark
    color="white"
    v-model="scope.value"
    autofocus
    @keyup.enter="scope.set"
  />
</q-popup-edit>

关于更详细的用法，请阅读QPopupEdit的页面。

QLayout

@scroll事件参数现在有了一个稍微不同的内容：

{
  position, // 数字 (从顶部下来的像素)
  direction, // 字符串 ("top", "bottom")
  directionChanged, // 布尔值
  inflectionPoint, // 方向改变时的最后位置（从顶部）--数字（像素）
  delta // 自上次@滚动更新以来的差异 - 数字（像素）
}

QOptionGroup

增加了"label"和"label-N"插槽

QRouteTab

增加了"ripple"属性。

QScrollArea

QScrollArea已经被重新设计，现在它同时支持垂直和水平滚动。

• 增加了属性: “vertical-bar-style"和"horizontal-bar-style” (覆盖适用于垂直和水平的滚动条的"bar-style")
• 增加了属性: “vertical-thumb-style"和"horizontal-thumb-style” (覆盖适用于垂直和水平滚动条的滑点的"thumb-style")
• 删除了属性: “horizontal” (现在已经过时了，因为QScrollArea同时支持垂直和水平滚动)
• "getScrollPosition "方法现在返回一个形式为{ top, left }的对象（例如：{ top: 5, left: 0 }）。
• "setScrollPosition "和 "setScrollPercentage “方法现在需要一个新的第一个参数（名为 “axis”，其值为"horizontal"或"vertical”): (axis, offset[, duration])

QScrollObserver

用 "axis"替换了属性 “horizontal”（字符串：“vertical”、“horizontal”、“both”；默认值：“vertical”）。

@scroll事件参数现在有一个稍微不同的内容：

{
  position: {
    top, left // 数字 (像素)
  },
  direction, // 字符串 ("top", "right", "bottom" 或 "left")
  directionChanged, // 布尔值
  inflectionPoint: { // 改变方向时的最后位置
    top, left // 数字 (像素)
  },
  delta: { // 自上次@scroll更新以来的差异
    top, left // 数字 (像素)
  }
}

QSelect

• "itemEvents"属性已从"option"槽中删除。该信息现在包含在"itemProps"中。这一变化是Vue 3对渲染函数的第二个参数进行扁平化处理的逻辑结果（“on”、"props "等合并为一个对象）。
• 新的方法：“blur()”

QSlider/QRange

新属性：track-size、thumb-size、marker-labels、marker-labels-class、switch-label-side、switch-marker-labels-side、inner-min、inner-max。 thumb-color, track-color, track-img, inner-track-color, inner-track-img, selection-color, selection-img。

新增QRange专用属性：left-thumb-color, right-thumb-color

新的插槽：marker-label, marker-label-group

QTable

将 “data"属性重命名为"rows”（以解决 "data"被错误地推断为Vue组件的 "data()"方法的TS冲突问题）。

新的属性：“column-sort-order”。新的"columns"定义属性（“sortOrder”），现在 "style"classes"也可以是函数。

由于Vue 3的新v-model特性，它取代了".sync"修饰符，:pagination.sync="..."现在需要使用为v-model:pagination="..."

QTable/QTree

由于Vue 3的新的v-model特性，它取代了".sync "修饰符，以下属性需要以不同的方式使用：

QTabs

增加了"active-class"属性。

QBtnDropdown/QCarousel/QTooltip/QMenu/QDialog/QStepper/QTabPanels

增加了"transition-duration"属性。

QSkeleton

增加了"animation-speed"属性。

QUploader

QUploaderBase组件已被移除，转而使用createUploaderComponent工具。

Quasar directives

本节唯一的突破性变化是，我们删除了GoBack指令。使用路由器引用来代替push/replace/go(-1)。

// Composition API 变体
import { useRouter } from 'vue-router'

setup () {
  const $router = useRouter()

  // 返回一条记录，与$router.back()相同。
  $router.go(-1)
}

// 你的组件内的Options API变体
this.$router.go(-1)
}

Quasar插件

AppFullscreen 插件

request()方法现在可以在全屏状态下接受另一个节点了。

Loading插件

• 增加了 "boxClass "属性
• 默认情况下，消息是受保护的，不会受到XSS攻击。如果你想用 “message"属性显示HTML内容，你还应该指定"html: true”。这种行为与Quasar v1完全相反，在Quasar v1中，你可以使用 “sanitize”（不再可用；现在默认启用）道具来不显示HTML。

Dialog插件

有几件事发生了变化。

1. 如果你使用带有自定义组件的对话框插件，那么你现在必须在"componentProps"下提供组件属性：

// 老的，废弃的v1写法
const dialog = this.$q.dialog({ // 或 Dialog.create({...})
  component: MyVueComponent,
  someProp: someValue,
  // ...
})

// 新的v2的写法 (Composition API)
import { useQuasar } from 'quasar'

setup () {
  const $q = useQuasar()
  // ...
  const dialog = $q.dialog({ // 或 Dialog.create({...})
    component: MyVueComponent,
    componentProps: {
      someProp: someValue,
      // ...
    }
  })
}

// 新的v2的写法 (Options API)
const dialog = this.$q.dialog({ // 或 Dialog.create({...})
  component: MyVueComponent,
  componentProps: {
    someProp: someValue,
    // ...
  }
})

2. parent和root属性已被删除。由于Vue 3的架构，我们不能再使用一个"parent"组件来提供/注入功能。但你仍然能够在你的自定义组件中使用Vue Router/Vuex/等。
3. 如果用自定义组件调用Dialog插件，你需要添加emits: ['ok', 'hide']到你的组件中，因为Vue 3现在需要一个组件可能发出的事件的明确列表。你也可以将该组件转换为Composition API。详细信息请见调用自定义组件。

// 被调用的组件代码
export default {
  // ...
  emits: [ 'ok', 'hide' ],
  // ...
}

4. 如果用内置组件调用对话框，那么有一种新的方式来提供原生属性：

// OLD way
prompt: { // or "options"
  // ...
  attrs: {
    someattribute: 'value'
  }
}

// New v2 way
prompt: { // or "options"
  // ...
  someattribute: 'value'
}

Meta插件

// v1写法（旧的，已废除）。
// 一些.vue文件
export default {
  meta: {
    // ...definition
  }
}

新写法(Composition API或Options API):

// 一些.vue文件的
// Composition API变体
import { useMeta } from 'quasar'

export default {
  setup () {
    // 需要在setup()方法下直接调用!
    useMeta({
      // ...定义
    })
  }
}

// 一些.vue文件的
// Options API变体
import { createMetaMixin } from 'quasar'

export default {
  mixins: [
    createMetaMixin({ /* ...definition */})
    // 或动态的:
    createMetaMixin(function () {
      // 这里的"this"指向vue组件。
      return {
        /* ...定义... */
      }
    })
  ]
}

详细情况请见Meta Plugin。

Quasar实用程序

date实用程序

为方法"addToDate"和"subtractFromDate"提供的对象字面属性名称已经规范化。#7414。

exportFile实用程序

exportFile()实用程序（强制浏览器下载一个有你指定内容的文件）有了新的功能：你可以指定bom（字节顺序标记）和/或一个文本编码。[更多信息]（/quasar-utils/other-utils#export-file）。

scroll实用程序

color实用程序

从color实用程序中删除了 "getBrand"和 “setBrand”。它们被 "getCssVar"和 "setCssVar"取代。

//老的，废弃的v1的写法：
import { colors } from 'quasar'

const { getBrand, setBrand } = colors
const primaryColor = getBrand('primary')
setBrand('primary', '#f3c')

// 新的v2的写法
import { getCssVar, setCssVar } from 'quasar'

const primaryColor = getCssVar('primary')
setCssVar('primary', '#f3c')

事件总线实用程序

Vue 3放弃了事件总线的方法（$on, $once, $off, $emit）。然而，Quasar v2 (v2.8.4+)有一个原生的对应方法：事件总线实用程序。

Quasar语言包

我们改变了语言包的文件名以反映浏览器使用的标准命名。这将允许你在想动态导入Quasar语言包文件时使用$q.lang.getLocale()。

变化的全部清单：

如果你在quasar.config.js中配置了一个默认的Quasar语言包，那么你需要编辑它：

// 老的写法
framework: {
  lang: 'en-us'
}

// 新的写法
framework: {
  lang: 'en-US'
}

你还需要编辑所有你的来自quasar/lang/的动态导入，以匹配新的语法。

Quasar CSS

颜色CSS变量名称（所有与品牌有关的）已经改变：

// 老
--q-color-primary, --q-color-secondary, ...

// 新
--q-primary, --q-secondary, ...

Quasar UMD

• 由于新的Vue 3架构，启动应用程序的代码已经改变，你需要相应地调整。
• 脚本和css标签的命名方案发生了变化，以包括发行的类型。例如，最小化的资源文件名现在以.prod.js/.prod.css结束。这样做是为了配合Vue 3自己的文件命名方案。

Quasar App CLI

本节指的是"@quasar/app" v3包，它支持Vue 3和Quasar UI v2。

• 放弃了对src/css/quasar.variables.styl的支持。此外，如果你仍然想使用Stylus作为预处理器（但没有Quasar Stylus变量），那么你需要手动yarn/npm安装stylus和stylus-loader作为dev依赖到你的项目（"@quasar/app"不再提供它们）。
• 新增 quasar.config.js > build > vueLoaderOptions属性.
• 删除quasar.config.js > framework > importStrategy。自动导入的效果非常好，现在被默认使用，并且是唯一的选择。
• url-loader的配置得到了增强，现在它也支持 "ico"文件了。
• 如果你一直使用quasar.config.js > build > rtl的形式，那么你现在必须匹配这些选项，因为我们已经从未维护的postcss-rtl切换到postcss-rtlcss软件包。

如果你有启动文件，你通过Vue.prototype.$q访问和改变$q对象，那么你需要适应这个。

// 启动文件中的老的写法
Vue.prototype.$q.iconSet.chip.remove = 'fas fa-times-circle'

// 新的写法
export default ({ app }) => {
  app.config.globalProperties.$q.iconSet.chip.remove = 'fas fa-times-circle'
}

关于应用程序扩展的工作方式没有任何改变。请注意，并不是所有的应用程序扩展都与Quasar UI v2兼容，我们正在努力发布新的兼容版本。

TypeScript

更新src/shims-vue.d.ts以匹配Vue3版本。

创建一个src/quasar.d.ts文件，将[这里]的内容复制到其中(https://github.com/quasarframework/quasar/blob/71143c4417d6bf3fd7a5dc88dd0e577d822ddc92/create-quasar/templates/app/quasar-v2/ts-webpack/BASE/src/quasar.d.ts)。

如果你使用ESLint，请在quasar.config.js中更新该属性：

// 老的写法
supportTS: {
  tsCheckerConfig: { eslint: true },
},

// 新的写法
supportTS: {
  tsCheckerConfig: {
    eslint: {
      enabled: true,
      files: './src/**/*.{ts,tsx,js,jsx,vue}',
    },
  },
},

这是由于上游对"fork-ts-checker-webpack-plugin"的突破性改变。

Quasar App CLI Electron模式

开箱即用的对TS的支持现在可用。

你现在也可以为主线程和预加载脚本启用ESLint：

electron: {
  chainWebpackMain (chain) {
    chain.plugin('eslint-webpack-plugin')
      .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  },

  chainWebpackPreload (chain) {
    chain.plugin('eslint-webpack-plugin')
      .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  }
}

Quasar App CLI PWA模式

如果你在InjectManifest模式下使用Workbox，那么知道/src-pwa/custom-service-worker.[js|ts]现在也被编译了是很有用的。这意味着，在你的代码中，你现在也可以用相对路径导入。

由于升级到Webpack 5，你还需要将workbox-webpack-plugin升级到v6+。

你现在也可以为自定义service worker启用ESLint。而且它支持TS开箱即用（在这种情况下，将扩展名改成.ts）。

通过编辑quasar.config.js，可以为自定义service worker启用ESLint。

pwa: {
  chainWebpackCustomSW (chain) {
    chain.plugin('eslint-webpack-plugin')
      .use(ESLintPlugin, [{ extensions: [ 'js' ] }])
  }
}

Quasar App CLI SSR mode

如果你有一个使用Quasar SSR模式的项目，那么阅读它自己的SSR模式升级指南是必不可少的。

开箱即用的对TS的支持现在可用。

Quasar Extras

没有任何改变。你可以像Quasar UI v1那样使用它。

Quasar Icon Genie

没有任何改变。你可以像使用"@quasar/app"v1或v2项目一样使用它。