《开源精选》是我们分享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 vuetifyVuetify 也可以使用 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用法
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>Hello world</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
</html>—END—
开源协议：MIT
开源地址：https://github.com/vuetifyjs/vuetify