在本文当中，我们将探讨如何利用Vuetify快速构建具有吸引力的交互式前端。构建用户体验优异的友好应用程序界面，是一项需要经过反复实践且对知识有一定要求的技能。虽然Vuetify无法让你一夜之间积累丰富的用户体验设计经验，但足以帮助这一领域的新手带来坚实的探索开端。

作为一名Vue.js开发人员，目前市面上存在众多功能齐全且专门为Vue开发的CSS框架供大家选择。其中的典型例子正是Bootstrap-Vue。我已经试用过这套框架，其确实带来了远低于传统CSS框架的组件构建体验。然而，大家可能还希望为应用程序提供Material Design外观，以进一步降低新用户的上手门槛。

根据Material Design的相关说明：

“Material Design并不是一种单一风格，而代表着一套源自纸张与墨水的适应性设计系统。经过精心编排，你将能够更快构建起美观且实用的产品。”

希望这一声明能够为大家留下深刻的印象。目前，Vuetify已经成为Vue应用程序当中最完整的用户界面组件库，且遵循谷歌Material Design规范。下面，让我们尽快切入主题，聊聊如何上手Vuetify。

准备工作

本份指南专为具备Vue.js中级或高级知识的开发人员所编写。如果你从未使用Vue.js进行过应用程序构建，请首先参阅以下文章：

Jump Start Vue，这里有我们对Vue.js的完整介绍。
Getting Started with Vue.js——一份快速入门教程。
设置并运行Vue.js 2.0框架。
更多Vue.js文章。

Vuetify是什么？

Vuetify是一个专为Web及移动应用程序构建用户界面的开源MIT项目。该项目受到众多赞助商以及Vue社区志愿者们的支持。该项目亦得到充满活力的Discord社区论坛的支持，你也可以在这里讨论JavaScript等与Vuetify无关的问题。Vuetify开发团队致力于通过更为统一的更新周期修复bug并提供增强功能，此外还每周发布补丁以解决社区提出的各类问题。

大多数开源前端库都不具备如此程度的关注。因此，大家可以安心在自己的项目当中使用Vuetify，而无需担心项目后续得不到支持。Vuetify能够在全部主流浏览器上实现开箱即用。其在相对较早的浏览器——例如IE 11以及Safari 9——当中也能够正常运行，只是需要配合babel-polyfill。更早的旧版本将不受支持。Vuetify具有基于语义的特性，这意味着大家了解到的所有组件及道具名称都易于记忆与复用，且使用过程中无需经常查看文档。

Vuetify还提供免费/付费主题与大量预制布局，你可以利用这些资源快速实现应用程序的主题化。截至本文撰写之时，Vuetify的最新版本为v1.5.13，其使用Material Design Spec v1。

Vuetify的2.x版本将采用即将推出的Material Design Spec v2。在下一章节当中，我们将了解将Vuetify安装至开发项目当中的几种方法。

安装Vuetify

如果你已经拥有使用到旧版Vue CLI工具或者其它方式进行创建的Vue版本，则可通过以下方式轻松安装Vuetify：

 npm install vuetify

更新你的 index.js 或者 main.js并包含以下代码：

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

你还需要安装Material Icons，你可以将其以链接标记的形式将其纳入index.html文件当中：

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

如果你刚刚开启一个新项目，安装Vuetify同样非常简单。只需要以下几个步骤：

$ vue create vuetify-demo
>

$ cd vuetify-demo
$ vue add vuetify
$ ? Choose a preset: (Use arrow keys)
$ > Default (recommended)
$   Prototype (rapid development)
$   Configure (advanced)

在系统询问预设值时，你只需要选择Default，其代表着a la carte系统。基本上，这意味着你在构建用于部署的应用程序时，将只会绑定用到的Vuetify组件，而非整个Vuetify库。这将显著降低你开发build的大小。你也可以使用Vue UI在项目当中安装Vuetify。在Vuetify安全完成之后，接下来我们聊聊如何使用。

基础知识

在将Vuetify添加至我们的项目之后，你会注意到我们的项目结构与代码发生了很大变化。其中我们首先需要注意的是App.vue。

<template>
  <v-app>
    <v-toolbar app dark class="indigo">
      <v-toolbar-title class="headline text-uppercase">
        <span>Vuetify &nbsp;</span>
        <span class="font-weight-light">MATERIAL DESIGN</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn
        flat
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-toolbar>

    <v-content>
      <HelloWorld />
    </v-content>
  </v-app>
</template>

如果你启动服务器并打开 localhost:8080，应该会看到以下视图：

请注意当前页面与默认启动页面（使用Vue CLI create app命令创建而成）之间的不同之处。这意味着Vuetify已经得到正常设置，下面让我们进一步观察Vuetify代码，先从以下组件开始：

<v-app>
  <!-- put content here.... -->
</v-app>

其中v-app 组件是应用程序正常工作所必需的强制性打包器，其用于确定布局当中的网格断点。它可以存在于当中的任何位置，但必须处于全部Vuetify组件的父层级。而 v-content组件则必须是v-app的直接分支。

我们接下来要讨论的组件是v-toolbar。其可以作为应用程序的主工具栏。你可以在其中旋转图标、菜单及其它项目。

<v-app>
  <v-toolbar app>
    <!-- put content here.... -->
  </v-toolbar>
</v-app>

我们遇到的第一项属性是app。其负责简单告诉工具栏在用户开始向下滚动时继续保持在顶部。如果删除app属性，工具栏将滚动显示页面的其余部分。亲自尝试一下，大家可以看看会发生什么。我们可以进一步添加更多属性对工具栏外观进行自定义。

在使用Vuetify之后，大家会发现几乎不需要编写任何CSS代码来自定义应用程序的外观。然而，如果你希望应用程序能够支持多个主题，则可能需要定义多种样式表。Vuetify提供一套主题生成器，可帮助你为主题选择一组色彩搭配。

现在，让我们专注于利用属性自定义我们的应用程序。我们首先要了解的是dark，下面将代码更新为以下形式：

<v-app>
  <v-toolbar app dark>
    <!-- put content here.... -->
  </v-toolbar>
</v-app>

你的浏览器页面应该更新如下：

这里的dark属性只是将背景更改为黑色，而将文本更改为白色。下面我们使用另一个属性，color：

<v-app>
  <v-toolbar app dark color="red">
    <!-- put content here.... -->
  </v-toolbar>
</v-app>

正常来说，你的浏览器页面应该更新为以下形式：

移除 dark属性，你应该看到以下结果：

刚刚发生了什么？总结来讲，文本恢复为默认的颜色，黑色。在指定 clolor属性时，其会利用 dark属性定义的颜色覆盖背景颜色。要让文本再次变为白色，你可以重新添加 dark属性，或者简单执行以下操作：

<v-app>
  <v-toolbar app color="red white--text">
    <!-- put content here.... -->
  </v-toolbar>
</v-app>

你的浏览器页面应该更新为以下形式：

文本字体颜色已经变更为白色，但button组件颜色保持不变。你可以将属性dark或者color="white–text添加至button组件使其变为白色。相较于使用属性color，你也可以使用class并得到同样的结果。根据经验，你可以具体指定任何颜色以作为背景颜色。要指定字体颜色，你需要在颜色名称之后添加–text。你可以在除白色与红色之外的颜色中任意做出选择——例如尝试橙色、蓝色以及绿色等。下面我们再来点有趣的，按照以下方式更新你的工具栏代码：

<v-app>
  <v-toolbar app dark color="purple pink--text">
    <!-- put content here.... -->
  </v-toolbar>
</v-app>

你的浏览器页面应该更新为以下形式：

文本并不是太清晰，对吧？解决这个问题的方法之一，是使用高对比度颜色。当然，我们也可以选择另一种方法，例如让背景变暗或者使前景变亮。更新代码内容如下：

<v-app>
  <v-toolbar app dark color="purple darken-4 pink--text text--lighten-3">
    <!-- put content here.... -->
  </v-toolbar>
</v-app>

你的浏览器页面应该更新为以下形式：

现在，文本内容更加清晰。要让背景变暗，我们可以使用darken-1到darken-4的值。每个级别都会令背景更暗。大家也可以使用lighten-1 到lighten-4提亮背景。如果要变更文本颜色，请在lighten或者darken属性之前添加text–，例如text–lighten-3。我们也可以利用accent-1到accent-4的值控制饱和度。其中accent-1使颜色饱和度降低，而accent-1使颜色饱和度升高并变得更加生动。

要说明这么多属性与值的意义，太过简单的案例显然是不够用的。大家可以点击此处查看Vuetify颜色说明文档。

大家用不着费心记忆各个属性与类的名称。你只需要访问Vuetify说明文档，就能找到所需的内容。下面是https://vuetifyjs.com/en/components/toolbars \l api">v-toolbar的说明文档，其中有很多属性并不需要实际尝试，例如：

height
light
card
dense

请随意尝试其具体效果，看看你是不是喜欢。需要强调的是，大部分Vuetify组件都共享相同的属性，例如color。接下来，我们要简要看一下网格系统。

网格系统

Vuetify采用12点网格系统布置应用程序内容，其采用CSS Flexbox布局模块构建而成——这是一套在无需浮动或者位置的情况下为响应式而已结构分配条目的系统。该网格支持5个针对特定屏幕大小或方向的媒体断点。

要查看实际演示，请前往components/HelloWorld.vue并查看文件内容。以下为相关代码的简化版本：

<template>
  <v-container>
    <v-layout text-xs-center wrap>
      <v-flex xs12>
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-flex>

      <v-flex mb-4>
        <h1 class="display-2 font-weight-bold mb-3">Welcome to Vuetify</h1>
        <p class="subheading font-weight-regular">
          For help and collaboration with other Vuetify developers,
          <br />please join our online
          <a href="https://community.vuetifyjs.com" target="_blank"
            >Discord Community</a
          >
        </p>
      </v-flex>

      <v-flex mb-5 xs12>
        <h2 class="headline font-weight-bold mb-3">What's next?</h2>
        <v-layout justify-center>
          <a href="#" class="subheading mx-3">Explore Components</a>
          <a href="#" class="subheading mx-3">Select a layout</a>
          <a href="#" class="subheading mx-3">F.A.Q</a>
        </v-layout>
      </v-flex>
    </v-layout>
  </v-container>
</template>

v-container组件只负责将你的内容集中在屏幕中央。如果添加fluid属性，你的内容将占据屏幕的整个宽度。v-layout用于对内容进行分组并对齐。你可以https://vuetifyjs.com/en/framework/grid \l layout-playground">点击此处查看v-layout即时演示，能够帮助你了解如何使用这项属性。v-flex组件可以让内容占用一列或者多列。

这里我们就不具体介绍Vuetify网格了——相关内容比较复杂，需要另开一篇专题文章。如果你对网格不太熟悉，可以点击此处参阅我们的《CSS网格布局模块介绍》。下面，我们开始讲解Vuetify中的路由与导航设置方法。

##路由与导航

在安装过程中，我们可以使用路由工具包安装选项。如果选择这种方式，你的views文件夹当中应该已经存在几个文件。确保文件夹中已经有router.js文件并得到正确设置。Vuetify在构建之初就考虑到vue-router，因此大家不再需要使用专门的router-link组件。通过直接指定to属性，很多Vuetify组件都可以充当路由链接。

利用以下代码替换App.vue中的代码：

<template>
  <v-app>
    <!-- Start of Navigation -->
    <nav>
      <!-- Start of app toolbar -->
      <v-toolbar app>
        <v-toolbar-side-icon
          @click.stop="drawer = !drawer"
          class="hidden-md-and-up"
        ></v-toolbar-side-icon>
        <v-toolbar-title class="headline text-uppercase"
          >Vuetify Demo</v-toolbar-title
        >
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
          <v-btn flat to="/" exact>Home</v-btn>
          <v-btn flat to="/about">About</v-btn>
        </v-toolbar-items>
      </v-toolbar>
      <!-- End of app toolbar -->

      <!-- Start of mobile side menu -->
      <v-navigation-drawer app v-model="drawer" right>
        <!-- Menu title -->
        <v-toolbar flat>
          <v-list>
            <v-list-tile>
              <v-list-tile-title class="title">Menu</v-list-tile-title>
            </v-list-tile>
          </v-list>
        </v-toolbar>
        <v-divider></v-divider>
        <!-- Menu Links -->
        <v-list>
          <v-list-tile to="/" exact>
            <v-list-tile-action>
              <v-icon>home</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>Home</v-list-tile-content>
          </v-list-tile>
          <v-list-tile to="/about">
            <v-list-tile-action>
              <v-icon>description</v-icon>
            </v-list-tile-action>
            <v-list-tile-content>About</v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-navigation-drawer>
      <!-- End of mobile side menu -->
    </nav>
    <!-- End of Navigation -->

    <v-content>
      <!-- Display view pages here based on route -->
      <router-view></router-view>
    </v-content>
  </v-app>
</template>

<script>
  export default {
    name: "App",
    data() {
      return {
        drawer: false // Hide mobile side menu by default
      };
    }
  };
</script>

我在代码当中添加了注释，这样大家理解起来更加清晰。虽然最好将菜单项添加至数组数据结构当中，但为了简单起见，我们这里保留了完整的重复代码，以确保你能够轻松理解Vuetify组件的结构。以下是我们刚刚所使用的部分组件的说明文档链接：

这里要强调一下，Vuetify会自动在index.html当中添加一个指向Material Icons的链接。你可以立即开始访问Material Icons。接下来，我们将views/Home.vue中的代码替换为：

<template>
  <v-container>
    <v-layout>
      <h1>Home page</h1>
    </v-layout>
  </v-container>
</template>

另外，将views/About.vue中的代码替换为：

<template>
  <v-container>
    <v-layout>
      <v-flex xs12>
        <h1 class="display-1">About Page</h1>
        <p>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Excepturi
          obcaecati tempora sunt debitis, minima deleniti ex inventore
          laboriosam at animi praesentium, quaerat corrupti molestiae recusandae
          corporis necessitatibus vitae, nam saepe?
        </p>
      </v-flex>
    </v-layout>
  </v-container>
</template>

进行上述更改之后，你的浏览器应该会自动更新。以下是应用程序在完整桌面视图中的外观：

当你调整浏览器大小时，应用程序应该会切换至移动视图。以下是开启侧菜单时的外观效果：

无需多行代码即可构建极具吸引力的响应式Web应用程序的能力，实在是不可思议。在下一章节当中，我们将构建一个LoginForm组件以实现这样的效果。

构建Login Form

构建Login Form非常简单。创建components/Login.vue文件并复制以下代码：

<template>
  <v-layout align-center justify-center>
    <v-flex xs12 sm8 md4>
      <v-card class="elevation-12">
        <v-toolbar dark color="purple">
          <v-toolbar-title>Login Form</v-toolbar-title>
        </v-toolbar>
        <v-card-text>
          <v-form>
            <v-text-field
              prepend-icon="person"
              name="login"
              label="Login"
              id="login"
              type="text"
            ></v-text-field>
            <v-text-field
              prepend-icon="lock"
              name="password"
              label="Password"
              id="password"
              type="password"
            ></v-text-field>
          </v-form>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn dark color="pink">Login</v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
  </v-layout>
</template>

我使用以下组件来构建登录屏幕：

v-card
v-form
v-btn

请参阅各个组件的说明文档，了解你可以自定义哪些内容。接下来请将views/Home.vue文件更新以如下形式：

<template>
  <v-container>
    <v-layout>
      <h1>Home page</h1>
    </v-layout>
    <Login class="mt-5" />
  </v-container>
</template>

<script>
  import Login from "../components/Login";

  export default {
    components: {
      Login
    }
  };
</script>

有些朋友可能想问，mt-5类的作用是什么？它只是添加一个48像素的margin-top 。你可以https://vuetifyjs.com/en/framework/spacing \l spacing">点击此处查看间距说明文档以了解其在Vuetify中的作用。通过指定类，你可以轻松在内容的任何方向上添加预设的边距与填充。你的主页现在应该显示如下：

总结

到了文章的结尾，大家应该已经意识到，这里只是提到了一点点非常表面的部分。如果你之前使用过其它CSS框架（例如Bootstrap），那么你会发现Vuetify其实非常易于使用。事实上，你会发现Vuetify能够提供超越大多数流行CSS框架的功能与组件。但如果你希望构建具有完全自定义外观的Web应用程序，那么Vuetify可能并不适合你。相反，Vuetify适合那些希望利用大多数人所熟悉的设计元素，快速构建Web界面的用户。Material Design是一套高人气系统，且已经在各类未使用自定义外观的Android设备中得到广泛采用。

Vuetify可以通过精心设计出的前端元素帮助你节约时间与金钱。你不必投入大量时间创建自己的设计语言。除了声明应用程序主题中的黑色颜色之外，你在使用Vuetify时甚至不需要编写CSS代码。

希望大家喜欢学习Vuetify，也期待大家能够利用这套UI框架构建更多出色的Vue.js应用程序！

英文原文：https://www.sitepoint.com/get-started-vuetify/

创作场景

如何利用 Vuetify 快速构建具有吸引力的交互式前端？