探索未来界面设计：Vibe——优雅的React.js仪表盘框架-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00095/article/details/139056465

探索未来界面设计：Vibe——优雅的React.js仪表盘框架

VibeA beautiful react.js dashboard build with Bootstrap 4 👌项目地址:https://gitcode.com/gh_mirrors/vibe2/Vibe

Vibe Preview

Vibe 是一个基于Bootstrap 4构建的精美React.js管理面板模板，拥有丰富的自定义组件和模板。这个项目利用Sass进行样式编写，使得快速调整全局颜色和风格变得轻而易举。

快速启动你的项目

只需简单的几步，你就可以开始使用Vibe了：

安装依赖包：运行 yarn 或 npm install。
启动本地开发服务器：运行 yarn start 或 npm run start。

问题报告与社区参与

在遇到任何问题时，请直接在GitHub的issue页面上报告，我们会尽快回复并解决。欢迎通过创建pull request的方式来贡献你的代码，我们非常期待你的参与！

文档与自定义布局

Vibe基于Create React App，其详细的开发环境指南请参考官方文档。要修改布局，你可以：

更改Sass文件：位于 ./src/vibe/scss 目录下，如需调整全局样式，可更新 ./src/vibe/scss/components/vars.scss。
自定义响应式布局：在 MOBILE_SIZE 常量中设置移动设备布局阈值。
修改Logo：替换 ./src/assets/images/vibe-logo.svg 文件或导入新的 Logo。
开启/关闭聊天：在初始化时设置 showChat1 的状态。
改变头部导航：修改 HeaderNav 函数组件。
调整页脚：在 DashboardLayout 的 render() 函数中修改 <Footer> 部分。
创建菜单项：请参照下面的说明。

新建页面

在 ./src/views/pages 目录下创建你的页面组件（位置不限）。
将新组件添加到 ./src/views/index.js 中的 pageList 数组里。
访问由你指定的路由来加载新页面。

创建菜单入口

所有页面都可以通过路由访问，但只有在 ./src/_nav.js 中添加的页面才会显示在侧边栏菜单上。菜单分为顶部和底部两部分，支持多级菜单结构。

属性 | 描述 --- | --- name | 显示的菜单名称 icon | （可选）前缀图标，Vibe会自动加载正确的图标（使用react-feather库） url | （可选）目标页面的路径或外部链接地址 external | （可选）为真时，表示链接至外部页面 target | （可选）设定为_blank以使外部链接在新窗口打开 children | （可选）子菜单数组 divider | （可选）插入视觉分隔符，设为真即可实现

默认情况下，菜单项折叠，如需展开，需在 ./src/vibe/components/SidebarNav/components/NavDropdownItem.js 中改变初始状态。