# 升级指南

# 从 v1.5.x 升级到 v2.0.x

V2.0.x 包含不兼容的突破性更改。这包括以前 v1.x.x 已废弃的功能。对于相应的组件，控制台中会提示这些突破性的更改。

现有的网格仍在运行，并且有一个 extlint插件来帮助迁移。 This plugin can also be used to help upgrade to the new grid.

# 启动

Vuetify 现在必须实例化并传递到初始Vue 实例。这类似于 vue-router 和 vuex 的启动方式。

# Vue-CLI 3 Vuetify 插件安装

// v1.5
// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'

Vue.use(Vuetify, {
  iconfont: 'md',
})

// src/main.js
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

// v2.0
// src/plugins/vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  },
});

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

# 完整安装

// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')

// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')

# A-La-Carte 安装 - vuetify-loader

// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/main.styl'

const opts = { ... }
Vue.use(Vuetify, opts)

new Vue(...).$mount('#app')

// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')

# 框架

下面的组件默认是延迟的。这意味着他们在被明确激活之前不会渲染其内容。这大大提高了性能，但根据应用程序的需要，可能不需要这样做_(例如用于SEO目的)_. 若要返回以前的行为，请使用 eager prop。

v-badge
v-menu
v-tooltip
v-dialog
v-bottom-sheet

vuetify/lib 现在编译为es6. 这意味着支持IE 需要 transpileDependencies 或类似的用法，同时使用 @babel/polyfill 使用 vue-cli-3 时会自动添加编译依赖项。如果你有一个旧版本，你可以简单地将“vuetify”添加到列表中。

# 主题

现在支持dark/light主题变量。 dark 属性已被移动到主题属性。在切换 $vuetify.theme.dark 时将动态变化。如果只使用一个变量，你只需要定义它的颜色。

// v1.5

const opts = {
  dark: true,
  theme: {
    primary: '...',
    ...
  }
}

// v2.0

const opts = {
  theme: {
    dark: true,
    themes: {
      light: {
        primary: '...',
        ...
      },
      dark: {
        primary: '...',
        ...
      }
    }
  }
}

要禁用主题样式表创建，您必须使用主题对象的 disable 属性。

// v1.5

const opts = {
  theme: false
}

// v2.0
const opts = {
  theme: { disable: true }
}

# 图标 (Icons)

图标和字体图标声明的作用域现在在 icons 属性下。

// v1.5

const opts = {
  iconfont: 'fa4',
  icons: { ... }
}

// v2.0

const opts = {
  icons: {
    iconfont: 'fa4',
    values: { ... }
  }
}

现在默认使用 mdi 图标。 For information on how to install please navigate here
现在位于Vuetify 选项的 icons 属性

如果您想要使用自定义字体图标，您必须在 Vuetify 的初始化选项中设置它。

// v1.5

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  iconfont: 'fa4'
})

// v2.0

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  icons: {
    iconfont: 'fa4'
  }
})

# Goto - 滚动辅助

导入位置已更改。必须使用Vuetify实例显式引导以用于vue-router滚动行为。 Example of how to do this here. Reference documentation for scroll-behavior usage here.

// v1.5

import goTo from 'vuetify/es5/components/Vuetify/goTo'

// v2.0

import goTo from 'vuetify/lib/services/goto'

# 语言

translator 函数 t 现在嵌套在lang属性下。

// v1.5

this.$vuetify.t(...)

// v2.0

this.$vuetify.lang.t(...)

# 网格

网格是在系统引导之后重建的。现有的网格工程仍然需要一些轻微的修改。 Kael 创建了一个 eslint 插件来帮助此进程。

eslint-plugin-vuetify 为您修复大部分需要的调整
空格辅助已经改变为表示从0-12(0-48px) 的以4px为间距的数字
例如 px-7 是 7 * 4 = 28px
3 → 4
4 → 6
5 → 12
大多数“断点”和“非断点”助手都已规范化，例如。 .text-xs-centre 现在是 .text-center ，因为它适用于所有屏幕宽度，除非被覆盖.
.d-flex 的子节点不再应用额外的弹性规则. 这(弹性规则)可以通过 .flex-grow-1 手动完成。
辅助类已更改：
.fluid → .container--fluid
.scroll-y → .overflow-y-auto
.hide-overflow → .overflow-hidden
.show-overflow → .overflow-visible
.no-wrap → .text-no-wrap
.ellipsis → .text-truncate
.left → .float-left
.right → .float-right
不应该再使用<v-layout row>, 应该使用 .row 并且它现在是新栅格系统的一部分 (#7956)

使用以下正则表达式来更新间隔类：

find: ([\s"][mp][axytblr])-5
replace: $1-12

find: ([\s"][mp][axytblr])-4
replace: $1-6

find: ([\s"][mp][axytblr])-3
replace: $1-4

关于v2栅格与v1.5栅格对比的示例，请查看 github gist。

# 样式

主框架样式现在自动导入。

// v1.5
// src/plugins/vuetify.js

import 'vuetify/src/styles/main.sass' // 可以移除

必须安装 sass 包

yarn add sass -D
// 或
npm install sass -D

不要安装 node-sass, 它不是正确的库。

# 排版

根字体大小 (MD2 规格) 现在是 16px。

以下排版类已被替换：
subheading → subtitle-1

# 事件名称

所有事件名称已从camelCase更改为kebab case：

update:searchInput → update:search-input
update:inputValue → update:input-value
update:miniVariant → update:mini-variant
update:pickerDate → update:picker-date
update:selectingYear → update:selecting-year
tableDate → update:table-date
update:returnValue → update:return-value

# 激活器

具有激活器的组件, v-tooltip, v-menu, v-dialog, v-list-group 和 v-bottom-sheet 现在必须使用新的 v-slot 插槽语法绑定(激活器)
要求 Vue@2.6
我们知道这比v1.5版本要复杂得多。我们仍在探索如何以更简洁的方式支持新的 v-slot 插槽
您可以在Vue官方文档中找到关于解构插槽Props 的更多信息
您可以在Vue官方文档中找到关于 v-slot 的更多信息
此更改好的方面是更容易支持嵌套激活器和提供适当的 a11y 支持

# 常规激活器

<!-- v1.5 -->

<v-dialog>
  <v-btn slot="activator">...</v-btn>
</v-dialog>

<!-- v2.0 -->

<v-dialog>
  <template v-slot:activator="{ on }">
    <v-btn v-on="on">...</v-btn>
  </template>
</v-dialog>

# 嵌套激活器

<!-- v2.0 -->

<v-menu>
  <template v-slot:activator="{ on: menu }">
    <v-tooltip bottom>
      <template v-slot:activator="{ on: tooltip }">
        <v-btn
          color="primary"
          dark
          v-on="{ ...tooltip, ...menu }"
        >
          下拉列表 w/ 提示
        </v-btn>
      </template>
      <span>我是一个提示</span>
    </v-tooltip>
  </template>
</v-menu>

# 单元测试

Vuetify测试现在类似于 vue-router 和 vuex。

// setup.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

// Component.spec.js

import { createLocalVue, mount } from '@vue/test-utils'
import Vuetify from 'vuetify'
import Component from 'path/to/my/component'

const localVue = createLocalVue()

describe('Component.vue', () => {
  let vuetify

  beforeEach(() => {
    vuetify = new Vuetify(...)
  })

  it('should...', () => {
    const wrapper = mount(Component, {
      localVue,
      vuetify
    })
  })
})

# 表单输入验证

使用dark属性时，所有表单输入默认为白色，除非应用程序_显式_设置为dark模式

# 移除组件属性

以下是早期版本中不推荐使用的属性，现在已被删除：

<v-text-field textarea> 将不再渲染 <v-textarea>
<v-select autocomplete> 将不再渲染 <v-autocomplete>
<v-select combobox> 将不再渲染 <v-combobox>
<v-select overflow> 将不再渲染 <v-overflow-btn>
<v-select segmented> 将不再渲染 <v-overflow-btn segmented>
<v-select editable> 将不再渲染 <v-overflow-btn editable>

# 单个组件

这些是现有组件所需的更改。

# v-app

组件类已经预先以 v- 添加. 例如 .application → .v-application
dark和light prop不再对应用程序主题变量产生影响

<!-- v1.5 src/App.vue -->

<template>
  <v-app dark>
    ...
  </v-app>
</template>

// v2.0 src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

export default new Vuetify({
  theme: { dark: true }
})

# v-alert

提示默认可见

<!-- v1.5 -->

<template>
  <v-alert :value="true">
    ...
  </v-alert>
</template>

<!-- v2.0 -->

<template>
  <v-alert>
    ...
  </v-alert>
</template>

# v-bottom-nav

从 v-bottom-nav 重命名为 v-bottom-navigation

# v-bottom-sheet-transition

组件已被移除 开发者的笔记： 从未在API中明确列出

# v-btn

flat prop 现在变更为 text
round prop 现在变更为 rounded
不再有明确的边距

# v-card-media

组件已被移除

# v-carousel

cycle prop 不再是隐式的, 必须定义才能启动屏幕切换

# v-chip

value prop 现在变更为 active
value 不再控制可见性。 input 事件在点击时触发
selected prop 现在变更为 input-value 或 v-model
close 事件现在变更为 click:close

# v-data-iterator 和 v-data-table

数据表（和迭代器）已经从头开始重写，这样既更易于使用，又允许在更高级的用例中具有更大的灵活性。这导致了一些突破性的变化。其中一些(变化) 是在两个组件之间共有的，而有些 (变化) 则是每个组件所独有的。

# 共用的变化

disable-initial-sort 已被移除. 这两个组件初始化时都不再对数据进行排序。使用 sort-by (或 options) prop 进行排序
filter prop 已被移除. 使用 custom-filter 代替. 这样做是为了减少自定义筛选的混淆.
custom-filter 的签名从 (items: object[], search: string, filter: Filter): object[] 改变为 (value: any, search: string, item: any) => boolean.
pagination prop 已被移除. 使用单独的 page, sort-by 等props代替. 如果你想要提供单个对象，你可以使用新的 ** options ** prop 代替。注意: options 与 pagination 是不同的结构. 查看API文档了解详细信息
total-items prop 已重命名为 server-items-length
hide-actions prop 已重命名为 hide-default-footer. 它也不再改变每页的可见项
与默认页脚相关的Props已经移动到 footer-props prop。它们是:
prev-icon
next-icon
rows-per-page-items → items-per-page-options
rows-per-page-text → items-per-page-text
filter prop 已被移除

# v-data-iterator

content-tag, content-props, content-class props 已被移除. 相反，只需使用默认的作用域插槽来实现预期的标记。

# v-data-table

items slot 已重命名为 item
headers slot 已重命名为 header
item slot (和 header) 现在需要您定义一个 <tr> 元素. 此前是可选的
expand slot 已重命名为 expanded-item. 它不再包含一个扩展过渡, 并且插槽在 <tr> 元素内, 以便您可以定义自己的 <td> 列. 要恢复到类似1.5中的外观，您需要一个 <td>，其中 colspan 等于标题中的列数
hide-header 已重命名为 hide-default-header
select-all 已重命名为 show-select. 只要您没有定义覆盖内部行的渲染插槽（例如item或 body )，这也将在每个行上呈现一个复选框
与默认标题相关的Props已被移动到 header-props prop。它们是:
sort-icon

# v-expansion-panel et a

许多组件已重命名并移动props
v-expansion-panel → v-expansion-panels
v-expansion-panel-content → v-expansion-panel
新组件
v-expansion-panel-header
v-expansion-panel-content

<!-- v1.5 -->

<v-expansion-panel>
  <v-expansion-panel-content
    v-for="(item,i) in 5"
    :key="i"
  >
    <template v-slot:header>Item</template>
    <v-card>
      ...
    </v-card>
  </v-expansion-panel-content>
</v-expansion-panel>

<!-- v2.0 -->

<v-expansion-panels>
  <v-expansion-panel
    v-for="(item,i) in 5"
    :key="i"
  >
    <v-expansion-panel-header>
      Item
    </v-expansion-panel-header>
    <v-expansion-panel-content>
      <v-card>
        ...
      </v-card>
    </v-expansion-panel-content>
  </v-expansion-panel>
</v-expansion-panels>

# v-jumbotron

组件已被移除

# v-list et a

许多组件已被重命名
v-list-tile → v-list-item
v-list-tile-action → v-list-item-action
v-list-tile-avatar → v-list-item-avatar
v-list-tile-content → v-list-item-content
v-list-tile-title → v-list-item-title
v-list-tile-sub-title → v-list-item-subtitle
avatar prop 已被移除

# v-list-group

再也不能在激活器插槽中使用 v-list-item.
激活器的侦听器传递到内部的 v-list-item .
使用 v-list-item-content/v-list-item-title 等代替

# v-select - v-autocomplete - v-combobox - v-overflow-btn

现在将 ** attributes ** 和 ** listeners ** 传递到 ** item ** 插槽以获得适当的 a11y 支持 (从平铺分割以匹配其他实现)。

<!-- v1.5 -->

<v-select>
  <template v-slot:item="{ item, tile }">
    <v-list-tile v-bind="tile">
       ...
    </v-list-tile>
  </template>
</v-select>

<!-- v2.0 -->

<v-select>
  <template v-slot:item="{ item, attrs, on }">
    <v-list-item v-bind="attrs" v-on="on">
       ...
    </v-list-item>
  </template>
</v-select>

{ tile } 的作用域插槽值现在是 { attrs, on }. 现在绑定了类似于 v-menu 的激活器插槽.

# v-select

不再有默认启用的 autocomplete

# v-speed-dial

图标交换不再通过css进行激活。
激活器槽将在将来提供一个model.

<!-- v1.5 -->

<v-speed-dial>
  <template v-slot:activator>
    <v-btn
      dark
      fab
    >
      <v-icon>account_circle</v-icon>
      <v-icon>close</v-icon>
   </v-btn>
  </template>
</v-speed-dial>

<!-- v2.0 -->

<v-speed-dial v-model="fab">
  <template v-slot:activator>
    <v-btn
      dark
      fab
    >
      <v-icon v-if="fab">account_circle</v-icon>
      <v-icon v-else>close</v-icon>
    </v-btn>
  </template>
</v-speed-dial>

# v-tabs

color prop 已变更为 background-color. 颜色现在影响默认文本和滑块颜色
各种类名在整个过程中都被改变了
v-tab__div 已被移除, 使用 v-tab 代替
v-tab__item → v-tab
v-tabs__slider → v-tabs-slider
v-tabs__bar → v-tabs-bar

# v-tabs-items

嵌套时不再隐性继承 v-tabs 模型。必须使用 :value 或 v-model 显示绑定.

<!-- v1.5 -->

<v-tabs v-model="tabs">
  ...
  <v-tabs-items>
    ...
  </v-tabs-items>
</v-tabs>

<!-- v2.0 -->

<v-tabs v-model="tabs">
  ...
  <v-tabs-items v-model="tabs">
    ...
  </v-tabs-items>
</v-tabs>

开发人员注意：tabs-items组件不必提供，仅对自定义实现是必需的。

# v-text-field

mask prop 和功能已被移除. 您应该使用第三方库如 vue-the-mask 代替.
The prepend-icon-cb, prepend-inner-icon-cb, append-icon-cb, and append-outer-icon-cb props have been removed. Instead you can use @click:prepend, @click:prepend-inner, @click:append, and @click:append-outer events, respectively.

# v-text-field - v-select - v-textarea - v-autocomplete - v-combobox

box prop 已变更为 filled

<!-- v1.5 -->

<v-text-field box></v-text-field>

<!-- v2.0 -->

<v-text-field filled></v-text-field>

# v-text-field - v-select - v-textarea - v-autocomplete - v-combobox - v-btn - v-alert

outline prop 已变更为 outlined

<!-- v1.5 -->

<v-btn outline></v-text-field>
<v-autocomplete outline></v-autocomplete>
<v-alert outline></v-alert>

<!-- v2.0 -->

<v-btn outlined></v-text-field>
<v-autocomplete outlined></v-autocomplete>
<v-alert outlined></v-alert>

# 我需要帮助

如果你陷入困境需要帮助，不要担心！我们有一个非常大和专注的社区，能够提供全天候的帮助。请到发布迁移频道。

了解更多？

继续学习由我们的团队选择的相关内容，或通过使用下面的导航链接在页面之间跳转。

在 GitHub 上编辑此页面

最后更新：10/07/2024, 11:31:37 AM