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

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

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

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

根据 Material Design 的相关说明：

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

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

准备工作

本份指南专为具备 Vue.js 中级或高级知识的开发人员所编写。如果你从未使用 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：

复制代码 

npminstallvuetify

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

复制代码 

importVue from"vue";
importVuetify from"vuetify";
import"vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

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

复制代码

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

复制代码 

$ vue create vuetify-demo
>

$ cd vuetify-demo
$ vueaddvuetify
$ ? 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。

复制代码

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

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

复制代码

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

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

复制代码

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

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

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

复制代码

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

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

复制代码

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

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

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

复制代码

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

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

复制代码

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

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

复制代码

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

现在，文本内容更加清晰。要让背景变暗，我们可以使用 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 并查看文件内容。以下为相关代码的简化版本：

复制代码

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 中的代码：

复制代码

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

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

复制代码

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

复制代码

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

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

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

构建 Login Form

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

复制代码

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

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

复制代码

有些朋友可能想问，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/

Related Posts

About The Author

bjmayor

程序员，码农，php,python,ios,android,go，产品经理，创业。