简介
Vuetify 是一个纯手工精心打造的 Material Design 样式的 Vue UI 组件库。 不需要任何设计技能 — 创建叹为观止的应用程序所需的一切都触手可及。
不过值得一提的是,Vuetify正在研发Vue3版本,如果你想现在就使用Vue3版本的Vuetify那可能还需要等待一段时间了。
vuetify个人认为最大的特性是用 Material Design 样式设计的,对于喜欢这种样式的小伙伴们有福了,这个框架一定会让你大饱眼福[呲牙]
而且里面内置了大量的指令,可以非常方便的开发
快速开始
同其它的Vue组件库一样,Vuetify也需要先引入才能够使用
安装如下:
yarn add vuetify
# 或
npm install vuetify
创建一个插件:
// src/plugins/vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify(opts)
引入插件:
// src/main.js
import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export
new Vue({
vuetify,
}).$mount('#app')
浏览器支持如下图
组件预览
总结
现在Vuetify还没有开发完成Vue3版本,但Vue2版本功能是真的强大,组件也是非常的丰富,有丰富的函数和指令,完全满足我们平时的开发需求。如果对一些UI组件库有审美疲劳了,那么它非常值得一试。
最后祝小伙伴们生活美好,工作顺利,万事如意