介绍
vuestic是基于Vue 3 的 开源免费UI 库，托管在Github上，基于 MIT 开源协议。是目前Github上为数不多的基于Vue3的开源组件库。
Github地址
https://github.com/epicmaxco/vuestic-ui
https://github.com/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-admin是官方基于vuestic的后端管理模板，demo界面访问可能有些慢，有哪些内容我们截图来看下：
总结
vuestic在Vue3生态中相当受欢迎的，目前在Github上stars总数将近上万，目前Vue3的生态仍然还在发展中，后续肯定会有越来越多的优秀项目涌现！希望对你有所帮助！
