快速入门

使用一个Vuetify Vue CLI安装包 (基于官方示例) 立即开始您的项目。 Vuetify 支持SSR(服务端渲染),SPA(单页应用程序),PWA(渐进式Web应用程序)和标准HTML页面。

受支持的浏览器

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

    Chrome
    Supported
    Firefox
    Supported
    Edge
    Supported
    Safari 10+
    Supported
    IE11 / Safari 9
    Supported with polyfill
    IE9 / IE10
    Not supported

Vue CLI-3 Install

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

$ yarn global add @vue/cli
// OR
$ npm install @vue/cli -g

如何使用Vue-CLI-3,请查阅官方文档

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

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

$ vue create my-app
$ cd my-app

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

$ vue add vuetify

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

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

$ yarn serve
// OR
$ npm run serve

从CDN安装

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

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </v-app>
  </div>
 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>

对于全新应用

Vuetify拥有8个制作好的Vue CLI模版, 其中有3个是复刻自 Vue.js官网模版。他们只包含小量修改,让您能够更快地开始使用Vuetify。这些安装包需要先安装vue-cli。关于vue-cli的更多信息,请访问官方Github仓库。这些模板旨在让您尽快开始下一个项目。

这些包仍然需要vue-cli@2。如果您要开始一个全新的应用程序,建议使用vue-cli@3。下面的这些包已经开始着手迁移至vue-cli@3,有关使用 版本3的更多信息,请单击此处

1
Experience

2
Application

3
Tests

4
SEO

5
Suggestion

  • One Minute Quickstart
  • Simple HTML
  • Webpack Simple
  • Webpack
  • Webpack SSR
  • NUXT
  • PWA
  • Electron
  • A La Carte
  • Cordova

对于已有应用

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

如果您现有的应用程序使用的是vue-cli@3,请使用上面的指南来了解如何安装Vuetify包。

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

$ npm install vuetify --save
# or
$ yarn add vuetify

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

import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

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

// index.js or main.js
import 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
// main.styl
@import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader

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

<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">
</head>

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

// index.js or main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

You can also asynchronously load the fonts. For this, use npm or yarn to install webfontloader.

// App.vue
import WebFontLoader from 'webfontloader'
 
export default {
  mounted () {
    WebFontLoader.load({
      google: {
        families: ['Roboto:100,300,400,500,700,900']
      },
      active: this.setFontLoaded
    })
  },
  methods: {
    setFontLoaded () {
      this.$emit('font-loaded')
    }
  }
}

警告: 虽然Vuetify已经尽可能避免导致css冲突,但是也不能保证您自定义的样式不会改变您将此框架集成到现有项目中时的体验。

支持IE11和Safari 9

Vuetify使用了ES2015 / 2017的特性,在 Internet Explorer 11Safari 9/10上工作需要使用polyfills。 如果您使用的是vue-cli-3,则会自动为您完成。 否则,您需要在项目目录中安装babel-polyfill

// my-project/
$ npm install babel-polyfill --save
// or
$ yarn add babel-polyfill

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

// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()

建议您将babel-preset-env与相应的polyfill一起使用,以确保只将必要的polyfill添加到您的应用程序中。 有关babel-present-env的更多信息,请访问[文档]((https://babeljs.io/docs/en/next/babel-preset-env.html)

$ yarn add @babel/preset-env -d
// or
$ npm install @babel/preset-env --save-dev

安装后,将预设添加到.babelrcbabel.config.js

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

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

<template slot="items" slot-scope="props">
  <td>{‌{ props.item.name }‌}</td>
</template>