浏览器支持

Vuetify是一个渐进式的框架，希望能将前端开发提升到一个新的水平。为了这个目标，就不得不牺牲老版本IE浏览器的支持。下列清单并不详尽，我们只列出了主要支持的浏览器。

Chromium (Chrome, Edge Insider)

受支持的

Firefox

受支持的

Edge

受支持的

Safari 10+

受支持的

IE11 / Safari 9

需要 polyfill

IE9 / IE10

不受支持的

IE11 & Safari 9 支持

Vuetify 利用 ES2015/2017 的功能，需要使用 Internet Explorer 11 和 Safari 9/10 的 polyfills。如果您使用的是 Vue CLI，这将自动为您完成。否则，在你的项目目录下，你需要安装 babel-polyfill。

  1. $ yarn add babel-polyfill
  2. // OR
  3. $ npm install babel-polyfill --save

重要的是，要尽早将插件纳入你的主文件 index.js。如果使用 Vuetify SSR ，这将加载为 client-entry.js 文件

  1. // src/main.js
  3. import 'babel-polyfill'
  4. import Vue from 'vue'
  5. import vuetify from '@/plugins/vuetify'
  7. new Vue({
  8.   vuetify,
  9. }).$mount('#app')

建议使用 babel-preset-env 以及相应的 polyfill 来确保向应用程序添加必要的 polyfill。有关 babel-preset-env 的更多信息，请参阅文档

  1. $ yarn add @babel/preset-env -D
  2. // OR
  3. $ npm install @babel/preset-env -D

安装完成后，在你的 .babelrc 或者 babel.config.js 配置 preset

  1. // .babelrc
  2. {
  3.   "presets": ["@babel/preset-env"]
  4. }
  1. // babel.config.js
  3. module.exports = {
  4.   presets: ['@babel/preset-env']
  5. }

不幸的是，Vue CLI 不会自动带来 IE11 的兼容性，在这种情况下，你可能会遇到各种错误（例如 符号未定义）。为了解决这些错误，你可能需要在 vue.config.js 中手动添加 transpileDependencies 参数。

由于 Internet Explorer 对 <template> 标签的支持有限，你必须将完全编译后的 dom 元素发送到浏览器。这可以通过提前构建 Vue 代码或通过创建辅助组件来替换 dom 元素来完成。如果不经过处理就发送给 IE 浏览器，那么在通常情况下都会失败。

  1. <!-- Vue Component -->
  3. <template v-slot:items="props">
  4.   <td>{‌{ props.item.name }‌}</td>
  5. </template>