立即领取|华润集团、宁德核电、东风岚图等 20+ 标杆企业数字化人才培养实践案例 了解详情
写点什么

如何利用 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:4124079

评论

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

OpenAI的Sora亮相:AI视频生成的新用场

算AI

人工智能 创业 创新 sora

听 GPT 讲 client-go 源代码 (9)

fliter

有少年气的手机,正奔跑在AI旷野

脑极体

AI手机

京东商品优惠券数据采集

tbapi

京东 京东API接口 京东商品优惠券数据 京东商品详情数据

接手外包团队开发的微服务项目,人麻了!

伤感汤姆布利柏

CQT新里程碑:SOC 2 数据安全认证通过,加强其人工智能支持

股市老人

新一轮 LaunchPad 热潮形成的根源在哪里,Penpad或成机会

BlockChain先知

EMQX Enterprise 5.4 发布:OpenTelemetry 分布式追踪、OCPP 网关、Confluent 集成支持

EMQ映云科技

mqtt emqx mqtt broker

拼多多商品优惠券数据采集

tbapi

拼多多 拼多多商品详情接口 拼多多商品数据采集

开发竞猜比分与专家分析功能:如何为体育直播平台注入新活力

软件开发-梦幻运营部

面试官:如何实现多级缓存?

不在线第一只蜗牛

缓存 程序员 面试

揭秘 LLMs 时代向量数据库的 3 大实用场景

Zilliz

Milvus 向量数据库 LLM zillizcloud rag

听 GPT 讲 client-go 源代码 (10)

fliter

LaunchPad 市场的复苏,Penpad 成新兴生力军

石头财经

inBuilder低代码平台新特性推荐-第十六期

inBuilder低代码平台

开源 低代码

解锁Mysql中的JSON数据类型,怎一个爽字了得

不在线第一只蜗牛

json MySQL 数据库 开发语言

【论文解读】transformer小目标检测综述

合合技术团队

目标检测 Transformer 深度学习、

基于规则引擎的多维度配置化适配系统

五陵散人

规则引擎 匹配

QCN9274 QCN6274 IPQ9574|What Does Wi-Fi 7 Actually Bring?

wallyslilly

qcn9274 qcn6274 ipq9574

OpenTiny Vue 组件库适配微前端可能遇到的4个问题

OpenTiny社区

开源 Vue 前端 微前端 组件库

已解决zipfile.BadZipFile: File is not a zip file异常的正确解决方法,亲测有效!!!

小明Java问道之路

CORS就是跨域吗?

EquatorCoco

CORS web开发 跨域

已解决TypeError: Descriptors cannot not be created directly异常的正确解决方法,亲测有效!!!

小明Java问道之路

2023 re:Invent 用 PartyRock 10 分钟构建你的 AI 应用

亚马逊云科技 (Amazon Web Services)

亚马逊云科技 生成式人工智能 Amazon CodeWhisperer Amazon Bedrock Amazon Q

k8s-权限管理

EquatorCoco

Kubernetes 云原生 k8s

今日必读的9篇大模型论文

学术头条

人工智能 论文 大模型

龙蜥系统运维联盟:Kindling-OriginX 如何集成 DeepFlow 的数据增强网络故障的解释力

OpenAnolis小助手

deepflow 开源 系统运维 ebpf 龙蜥社区

你好,iLogtail 2.0!

阿里巴巴云原生

阿里云 云原生 iLogtail

马斯克称首位受试者可凭思维操控鼠标;字节低调推出视频模型丨 RTE 开发者日报 Vol.148

声网

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