vuestic是基于Vue 3 的 开源免费UI 库,托管在Github上,基于 MIT 开源协议。是目前Github上为数不多的基于Vue3的开源组件库。
https://github.com/epicmaxco/vuestic-ui
https://github.com/epicmaxco/vuestic-admin
允许通过 config 和 css 变量全局配置组件组件
使用你喜欢的包管理工具,以及注意nodejs版本大于等于14
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的生态仍然还在发展中,后续肯定会有越来越多的优秀项目涌现!希望对你有所帮助!
页面更新:2024-05-02
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号