基于react18+vite4+arco.design搭建极简版后台管理模板

趁着国庆前夕整了一个vite4结合react18搭建后台管理模板，搭配上字节团队react组件库ArcoDesign，整体操作功能非常丝滑。目前功能支持多种模板布局、暗黑/亮色模式、国际化、权限验证、多级路由菜单、tabview标签栏快捷菜单、全屏控制等功能。极简非凡的布局界面、高定制化模块，用心打造每一个功能。

技术栈版本

"@arco-design/web-react": "^2.53.1","clsx": "^2.0.0"act": "^18.2.0"act-dom": "^18.2.0"act-router-dom": "^6.16.0"

项目中使用的UI组件库arco.design是字节跳动前端团队推出的一款react企业级pc端组件库。

https://arco.design/

功能特性

使用vite4构建工具vite^4.4.5
最新前端技术栈react18 hooks、zustand、react-router、sass
支持中文/英文/繁体多语言解决方案
支持动态路由鉴权验证
支持路由tabsview控制切换路由页面
内置多个模板布局风格
搭配轻盈react组件库arco-design
低耦合高定制化模块

项目结构

采用标准的vite4 / react目录结构，遵循react18 hooks编码开发。

每一个模块都是纯手写定制化开发测试，打造不一样的超简非凡后台模板。整体运行编译非常极速顺滑。

/**
 * 入口模板
 * @author Hs
*/

import { useEffect } from 'react'
import { HashRouter } from 'react-router-dom'
// 通过 ConfigProvider 组件实现国际化
import { ConfigProvider } from '@arco-design/web-react'
 引入语言包
import enUS from '@arco-design/web-react/es/locale/en-US'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import zhTW from '@arco-design/web-react/es/locale/zh-TW'

import { AuthRouter } from '@/hooks/useRoutes'
import { appStore } from '@/store/app'

 引入路由配置
import Router from './routers'

function App() {
    const { lang,config: { mode },setTheme } = appStore()

    const getLocale = () => {
        switch(lang) {
            case 'en':
                return enUS
            case 'zh-CN' zhCN
            case 'zh-TW' zhTW
            default zhCN
        }
    }

    useEffect(() => {
        setTheme(mode)
    },[])

     (
        <ConfigProvider locale={getLocale()}>
            <HashRouter>
                <AuthRouter>
                    <Router />
                </AuthRouter>
            </HashRouter>
        </ConfigProvider>
    )
}

export default App

支持分栏、纵向、横向三种布局模板。

*
 * 主布局模板
 * @author Hs


import { useMemo } from 'react' 引入布局模板
import Columns from './template/columns'
import Vertical from './template/vertical'
import Transverse from './template/transverse'

 Layout() {
    const { config: { skin,layout } } = appStore()

     布局模板
    const LayoutComponent = useMemo(() =>(layout) {
            case 'columns' Columns
            case 'vertical' Vertical
            case 'transverse' Transverse
             Columns
        }
    },[layout])
    
     (
        <div classname="radmin__container">
            <LayoutComponent />
        </div>
default Layout

以上就是react-vite-admin的一些简单分享介绍，如果小伙伴们有一些建议，欢迎留言讨论哈~~

飞码LowCode前端技术系列：如何便捷快速验证实现投产及飞码探索

本篇文章从数据中心，事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。

如何优雅使用 vuex

大纲本文内容更多的是讲讲使用 vuex 的一些心得想法，所以大概会讲述下面这些点： Q1：我为什么会想使用 vuex 来管理数据状态交互？ Q2：使用 vuex 框架有哪些缺点或者说副作用？ Q3：我是如何在项目里使用 vuex 的？初识 vuex 对于 vuex，有人喜欢，有人反感喜欢的人觉

第三方组件及计算属性传参的问题解决方式

1. 前言唉，好想玩滋嘣。 2. 计算属性直接传参接收不到表格数据某一列需要用的计算属性时，模板中使用计算属性 fullName 就会直接调用 fullName 函数，而在模板中 fullName(item) 相当于fullName()(item)，此处为函数柯里化。 <el-table-

记录--Vue3基于Grid布局简单实现一个瀑布流组件

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前言在学习Grid布局之时，我发现其是CSS中的一种强大的布局方案，它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局，在刷某书和某宝首页时，我们发现其展示方式就是一种瀑布流，是一种流行的网站页面布局，视觉表……

用强数据类型保护你的表单数据-基于antd表单的类型约束

接口数据类型与表单提交数据类型，在大多数情况下，大部分属性的类型是相同的，但很少能做到完全统一。我在之前的工作中经常为了方便，直接将接口数据类型复用为表单内数据类型，在遇到属性类型不一致的情况时会使用any强制忽略类型错误。后来经过自省与思考，这种工作模式会引起各种隐藏bug，一定有更……

pinia的使用

前言最近新开了个项目，以前老项目都是vue2+vuex开发的，都说用vue3+pinia爽得多，那新项目就vue3+pinia吧。这里记录一下pinia的使用。使用方法安装pinia: npm i pinia main.js中引入pinia: //main.js import { create

记录--让我们来深入了解一下前端“三清”是什么

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前端“三清” 在前端开发中，我们经常听到关于“三清”的说法，即 window、document、Object。这三者分别代表了 BOM（浏览器对象模型）、DOM（文档对象模型）以及 JS 的顶层对象。在这个体系中，我们通过 JavaScr

记录--啊？Vue是有三种路由模式的？

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助众所周知，vue路由模式常见的有 history 和 hash 模式，但其实还有一种方式-abstract模式（了解一哈~）别急，本文我们将重点逐步了解：路由 + 几种路由模式 + 使用场景 + 思考 + freestyle 路由概念

基于react18+vite4+arco.design搭建极简版后台管理模板

技术栈版本

功能特性

项目结构

大家都在看