快速入门

使用一个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 is the next generation cli tool made to help you get started more easily than before. When you start your app with vue-cli you will also be able to get the official webpack updates and config changes, as well as Vuetify's updates without an arduous upgrade process.

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

For information on how to use Vue-CLI-3, visit the official documentation

Tip: If you don't want to overwrite your current vue-cli because you still need vue init from version 2, then try this.

Once the cli is installed, you can generate a new project scaffold. Select the default install unless you have specific packages that you need to include (e.g. vuex or vue-router). This will create a new Vue project that's ready to go with your selected options.

$ vue create my-app
$ cd my-app

Now that you have an instantiated project, you can add the Vuetify package using the cli.

$ vue add vuetify

Keep in mind, if you are installing the Vuetify package on an existing vue-cli-3 project, ensure you have a clean working directory in case there are issues with the merge.

After installation, you can run the dev npm script in package.json. This will start a local development server at 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:300,400,500,700|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仓库。这些模板旨在让您尽快开始下一个项目。

These packages require vue-cli@2. If you are starting a brand new application, it is recommended to use vue-cli@3. The below packages are currently being converted to use the new system. For more information on using version 3, click here

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来完成这个任务。这些都是包管理器,让您能够控制应用程序可用的资源。

If your existing application is using vue-cli@3, please use the above guide on how to install the Vuetify package.

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

$ 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:300,400,500,700|Material+Icons' rel="stylesheet">
</head>

Alternatively use npm or yarn to install 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

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

支持IE11和Safari 9

在您的项目目录中,安装babel-polyfill并将其导入到main entry中:

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

It is important to include the plugin as early as possible within your main index.js file. If using a Vuetify SSR package, this will apply to the client-entry.js file

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

由于IE浏览器对<template>标签的支持有限,您必须将完全编译好的dom元素发送到浏览器。这可以通过预先构建你的Vue代码或者通过创建帮助组件来替换dom元素来完成。例如,如果直接发送到IE,这将失败:

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

Once installed, add the preset to your .babelrc or babel.config.js

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

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:

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