Vuetify是一个渐进式的框架，试图推动前端开发发展到一个新的水平。为了最好地完成这个任务，必须作出不支持一些老版本IE浏览器的牺牲。这不是兼容浏览器的详尽清单，而是主要受支持的目标浏览器。

Vue-CLI 3 是Vue.js的下一代cli工具，可以帮助您更轻松地开始使用。当使用vue-cli启动应用程序时，您还可以获得官方webpack的更新和配置更改，以及Vuetify的更新，而无需经过艰苦的升级过程。

安装vue-cli后，您可以生成新的项目脚手架。除非你需要安装特定的包（例如vuex或vue-roter），否则请选择默认选项安装。这样将根据你的选项创建一个新的项目。

Tip：如果你因为仍然需要使用vue-cli2，不想覆盖你当前的vue-cli。可以尝试这个方法。

如果你有个了一个实例化的项目，你可以使用vue-cli添加 vuetify package

需要注意的是，如果要在现有的vue-cli-3项目上安装Vuetify包，请确保您有一个干净的工作目录，以防合并时出现问题。

安装后，您可以在package.json中运行npm开发脚本。 这将在 https://localhost:8080启动本地开发服务器。

如果想将Vuetify引入到已有项目中，您必须把它拉入您的项目的node_modules目录。你可以使用npm或yarn来完成这个任务。这些都是包管理器，让您能够控制应用程序可用的资源。

有关如何在您的环境中运行npm的详细说明，请查看官方文档。另外，如果你想使用yarn，你可以在这里找到官方文档。安装完成后，您便可以从命令提示符运行任一命令。

一旦Vuetify已经安装，导航到您的应用程序主入口点。大多数情况下会在index.js或者main.js。您要在这个文件中引入（import）Vuetify并且告诉Vue使用它。

您还需要引入Vuetify的css文件。简单地，可以在您的index.html引入Vuetify css，或者导入实际的stylus文件甚至是压缩过的css文件.

包含Material Design图标的最简单方法是在您的index.html文件中添加一个link标签（在国内，建议使用https://fonts.cat.net/替换）。

或者使用npm或者yarn安装material-design-icons-iconfont。

Vuetify can also be installed using Vue UI, the new visual application for vue-cli-3. Ensure that you have the latest version of vue-cli installed and from your terminal type:

This will start the Vue User Interface and open a new window in your browser. On the left side of your screen, click on Plugins. Once navigated, simply search for Vuetify in the input field.

After installation, you will have the option to configure your application's default Vuetify settings.

如果不希望从Vue CLI安装Vuetify.js模板，可以将以下代码复制到您的index.html中。这将加载最新版本的Vue和Vuetify，让你能够开始使用组件。你也可以在codepen上使用Vuetify starter。

需要尽早在主 index.js文件中插入该插件。如果在使用Vuetify SSR包，则需要在 client-entry.js文件中进行同样的操作。

建议您将babel-preset-env与相应的polyfill一起使用，以确保只将必要的polyfill添加到您的应用程序中。 有关babel-present-env的更多信息，请访问文档

安装后，将预设添加到.babelrc或babel.config.js

由于Internet Explorer对<template>标签的支持有限。您必须将完全编译后的dom元素发送到浏览器。这可以通过提前构建Vue代码或通过创建辅助组件来替换dom元素来完成。如果你直接发送给IE，通常会导致失败。

Unfortunately vue-cli-3 doesn't automatically bring IE11 compatibility in which you may encounter various errors (such as Symbol is not defined). To assist in resolving these errors you may need to manually add transpileDependencies parameter in vue.config.js

Due to Internet Explorer's limited support for <template> tags, you must send fully compiled dom elements to the browser. This can be done by either building your Vue code in advance or by creating helper components to replace the dom elements. For instance, if sent directly to IE, this will fail: