写点什么

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

  • 2019-07-22
  • 本文字数:7658 字

    阅读完需:约 25 分钟

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

在本文当中,我们将探讨如何利用 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:


 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>
复制代码


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



请参阅各个组件的说明文档,了解你可以自定义哪些内容。接下来请将 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/


2019-07-22 18:4124192

评论

发布
暂无评论
发现更多内容

三面蚂蚁惨败,面试官要求手写算法,从外包公司到今日头条offer

Java 后端

什么是事务数据库?,Java程序员面试题集大全

Java 程序员 后端

【Flutter 专题】50 图解动画小插曲之 Lottie 动画

阿策小和尚

Flutter 小菜 0 基础学习 Flutter Android 小菜鸟 9月日更

【墨天轮专访第四期】华为云GaussDB:发挥生态优势,培养应用型DBA

华为云数据库小助手

GaussDB 交流 华为云数据库 人物访谈

如何从零搭建起一支技术团队

石云升

团队管理 管理 引航计划 内容合集 9月日更

什么?语音合成开源代码不会跑,Follow me!

华为云开发者联盟

tensorflow 语音合成 Tacotron2 DeepMind 深度神经网络模型

狄刚谈区块链:技术上去中心化并不等于管理去中心化

CECBC

三面滴滴Java岗,Java程序员校招蚂蚁金服

Java 程序员 后端

手撸二叉树之二叉搜索树的最小绝对差

HelloWorld杰少

数据结构与算法 9月日更

三大「价值流」搞定技术型管理

蔡建斌

管理 技术管理 精益 引航计划 内容合集

带你读AI论文丨用于细粒度分类的Transformer结构—TransFG

华为云开发者联盟

细粒度 映射 Transformer TransFG 差异性图片

NDK-AAudio

Changing Lin

9月日更

人才缺口超70万,15所高校新设区块链专业

CECBC

号外!号外!极客时间出插件了😎

IT蜗壳-Tango

极客时间 9月日更 浏览器插件

如何选择收银机主板?

双赞工控

安卓主板

三面美团、四面阿里成功斩下offer,下血本买的

Java 程序员 后端

使用Git分布式控制系统,怒斩腾讯和阿里的Offer

Java 程序员 后端

没有Linux服务器,该如何学习Linux呢?

Simon郎

大数据 Linux java;

【优化技术专题】「线程间的高性能消息框架」深入浅出Disruptor的使用和原理

洛神灬殇

Disruptor LinkedBlockingQueue ArrayBlockingQueue 9月日更

Vite + Vue3 + OpenLayers

德育处主任

大前端 地图 vite Vue3 openlayers

循环神经网络LSTM RNN回归:sin曲线预测

华为云开发者联盟

RNN 循环神经网络 LSTM LSTM RNN回归

世界的尽头是铁岭,互联网的尽头是它

艾小仙

14 种编程语言书写关机脚本,真香

梦想橡皮擦

9月日更

RocksDB原理及应用

hanaper

北鲲云SaaS平台让生物医学关键环节不再靠“猜”

北鲲云

Who is Mavenir?

俞凡

Mavenir

用IoT放羊养牛,不出门也能知道它们的动向

华为云开发者联盟

物联网 华为云 iotda 畜牧业 华为云物联网平台

Vue进阶(幺零七):arr.forEach() 跳出循环

No Silver Bullet

Vue 9月日更

测试模型中理解压力测试和负载测试

FunTester

性能测试 接口测试 压力测试 FunTester 负载测试

性能测试中标记请求参数实践

FunTester

性能测试 接口测试 压力测试 FunTester 标记参数

什么是Spring-Cloud、需要掌握哪些知识点,Java面试常问的算法题

Java 程序员 后端

如何利用Vuetify快速构建具有吸引力的交互式前端?_语言 & 开发_Michael Wanyoike_InfoQ精选文章