介绍

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 变量全局配置组件组件

1. 本地 - 深入配置组件
2. 全局 - 整体配置框架

• 跨浏览器、响应式
• 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的生态仍然还在发展中，后续肯定会有越来越多的优秀项目涌现！希望对你有所帮助！