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

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 并安装插件：

方式二：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
      
    
  

  
  
  

—END—

开源协议：MIT

开源地址：https://github.com/vuetifyjs/vuetify