高质量Vue的Material风格UI组件库

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐是一个Vue的Material风格组件库——Vuetify。

img

Vuetify完全按照Material设计规范进行开发，每一个组件都经过精心设计，具有模块化、响应式和优秀的性能。Vuetify使用独特和动态的布局自定义应用程序，并使用SASS变量自定义组件的样式。

特性

无障碍（a11y）组件 ：Vuetify组件旨在为所有基于鼠标的操作提供键盘交互，并在适用的情况下利用HTML5语义元素

支持双向性布局（LTR/RTL） ：支持 RTL (从右至左) 语言，可以通过使用 rtl 选项在程序启动时激活

响应式显示 ：可以根据窗口大小控制应用程序的显示效果

全局配置 ：可在 Vuetify.config 中修改全局引用

图标字体 ：Vuetify 支持引导 Material Design 图标 和 Material 图标

国际化（i18n） ：使用 current 选项指定可用的区域和当前活动的区域

内置布局 ：Vuetify有一个内置的开箱即用的布局系统

预先配置 ：Vuetify为所有组件提供默认配置，通过修改框架选项、SASS变量和自定义样式立即改变应用程序的外观和体验

SASS变量 ：Vuetify 使用 SASS/SCSS 来设计框架所有方面的样式和外观

goTo 函数 ：goTo 可以单独导入并在任何地方调用，绑定到 vue-router 时特别有用

主题配置 ：Vuetify 支持 浅色light 和 深色dark 颜色主题

部分组件

Alert 提示框

Bottom navigation 底部导航

Buttons 按钮

Calendars 日历

Cards 卡片

Dialogs 对话框

Expansion panels 扩展面板

Pagination 分页

Date pickers 日期选择器

Timelines 时间轴

安装

❝

更多安装方式参考：https://vuetifyjs.com/zh-Hans/getting-started/installation/

方式一：Vue CLI 安装

使用 Vue CLI 添加Vuetify：

vue add vuetify

Vuetify 也可以使用 Vue UI 安装。确保你已经安装了最新版本的 Vue CLI，然后从你的终端中键入：

# 确保 Vue CLI 版本是 >= 3.0 vue --version //或 vue -V # 然后启动 UI vue ui

这将启动 Vue 用户界面，并在浏览器中打开一个 新窗口。在屏幕左侧，单击 插件。在输入框中搜索 Vuetify 并安装插件：

img

方式二：Nuxt 安装

Vuetify可以通过添加Nuxt Vuetify模块进行安装：

yarn add @nuxtjs/vuetify -D # 或者 npm install @nuxtjs/vuetify -D

完成安装后，找到 nuxt.config.js 文件并打开编辑添加Vuetify模块：

// nuxt.config.js { buildModules: [ // 简单使用 '@nuxtjs/vuetify', // 和选项一起 ['@nuxtjs/vuetify', { /* 模块选项 */ }] ] }

方式三：CDN用法

Hello world