vuestic是基于Vue 3 的 开源免费UI 库，托管在Github上，基于 MIT 开源协议。是目前Github上为数不多的基于Vue3的开源组件库。
github/epicmaxco/vuestic-ui
github/epicmaxco/vuestic-admin
基于Vue.js 3.0 MIT开源协议功能丰富：超过 52 个可定制的组件两个预设的内置配色方案强大的配置(重点)：
允许通过 config 和 css 变量全局配置组件组件
本地 - 深入配置组件全局 - 整体配置框架跨浏览器、响应式i18n 国际化详细的文档
使用你喜欢的包管理工具，以及注意nodejs版本大于等于14
Node.js ( >=14.*)npm version 3+ ( 或者 yarn version 1.16+) and Git.
npm install vuestic-ui
//或者
yarn add vuestic-ui
安装完修改你的main.js或者main.ts文件
import { createApp } from ‘vue’
import App from ‘./App.vue’
import { VuesticPlugin } from ‘vuestic-ui’
import ‘vuestic-ui/dist/vuestic-ui.css’
const app=createApp(App)
app.use(VuesticPlugin)
app.mount(’#app’)主题配色
app.use(VuesticPlugin, {
colors: {
// Default colors
primary: ‘#23e066’,
secondary: ‘#002c85’,
success: ‘#40e583’,
info: ‘#2c82e0’,
danger: ‘#e34b4a’,
warning: ‘#ffc200’,
gray: ‘#babfc2’,
dark: ‘#34495e’,
// Custom colors
yourCustomColor: ‘#d0f55d’,
},
})图标配置
yarn add material-design-icons-iconfont -D
// or
npm install material-design-icons-iconfont -D
自定义
app.use(VuesticPlugin, {
icons: createIconsConfig({
aliases: [
{
“name”: “bell”,
“color”: “#FFD43A”,
“to”: “fa4-bell”
},
{
“name”: “ru”,
“to”: “flag-icon-ru small”
},
],
fonts: [
{
name: ‘fa4-{iconName}’,
resolve: ({iconName})=> ({ class: fa fa-${code} }),
},
{
name: ‘flag-icon-{countryCode} {flagSize}’/,
resolve: ({countryCode, flagSize})=> ({ class: flag-icon flag-icon-${countryCode} flag-icon-${flagSize} }),
}
],
}),
})组件配置
按钮为例
app.use(VuesticPlugin, {
components: {
VaButton: {
outline: true,
rounded: false,
size: ‘small’,
},
},
})视图组件
Alert
Avatar
Button
Button Dropdown
Button Group
Button Toggle
Chip
Data Table
Icon
Image
Modal
表单组件
Checkbox
Date Picker
File Upload
Form
Input
Option List
Radio
Rating
Select
Slider
Switch
布局组件
Accordion
Card
Collapse
Divider
List
导航组件
Badge
Breadcrumbs
Navbar
Pagination
Sidebar
Sidebar Item
Tabs
其它组件
Affix
App Bar
Backtop
Color Input
Color Palette
Hover
Infinite Scroll
Inner Loading
Parallax
Progress Bar
Progress Circle
Toast
vuestic-admin是官方基于vuestic的消费社区后端管理模板，demo界面访问可能有些慢，有哪些内容我们截图来看下：
vuestic在Vue3生态中相当受欢迎的，目前在Github上stars总数将近上万，目前Vue3的生态仍然还在发展中，后续肯定会有越来越多的优秀项目涌现！希望对你有所帮助！
随时随地看视频
