完美支持Vue3，一个自带管理模板的Vue3开源组件库——vuestic

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