ミニマリストの特別な反応フック + arcoDesign + vite バックエンド管理テンプレート

最近、react18 バックエンドテンプレートを構築するために vite4 を作成しました。これには、バイトチームの反応コンポーネントライブラリである Arco Design が搭載されており、全体的なコンパイルと操作がスムーズに接続されています。複数のテンプレートレイアウト、ダーク/ライトモード、国際化、権限検証、マルチレベルルーティングメニュー、タブビュータブバーショートカットメニュー、全画面制御およびその他の機能をサポートします。

ここに画像の説明を挿入します

テクノロジーを活用する

"@arco-design/web-react": "^2.53.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"sass": "^1.67.0",
"zustand": "^4.4.1"
"vite": "^4.4.5"

ここに画像の説明を挿入します
Arco.Design は、 ByteDance フロントエンドチームによって立ち上げられた非常に優れたエンタープライズレベルの PC 側コンポーネントライブラリです。

特性

最新のフロントエンド技術スタック、react18 フック、vite4、zustand、react-router、sass
中国語/英語/繁体字の多言語ソリューションをサポート
動的ルーティングの認証と検証をサポート
サポートルーティングタブコントロールスイッチングルーティングページを表示
複数のテンプレートレイアウトスタイルを内蔵
Light React コンポーネントライブラリ arco-design と組み合わせる

ここに画像の説明を挿入します

プロジェクトのディレクトリ構造

ここに画像の説明を挿入します
vite4 ビルドツールを使用して、react18 プロジェクトを作成します。すべて、react18 フック開発モデルに従っています。

/**
 * 入口模板
 * @author Hs  Q: 282310962
*/

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':
                return zhCN
            case 'zh-TW':
                return zhTW
            default:
                return zhCN
        }
    }

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

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

export default App

ここに画像の説明を挿入します

レイアウトテンプレートは、列+縦+横の3種類が用意されています。

/**
 * 主布局模板
 * @author Hs
*/

import {
    
     useMemo } from 'react'
import {
    
     appStore } from '@/store/app'

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

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

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

export default Layout

ここに画像の説明を挿入します

要約すると、これらは、react18 vite4 arco によって開発されたバックエンドの超簡易バージョンの共有の一部です。