Remix后臺(tái)開(kāi)發(fā)之remix-antd-admin配置過(guò)程
Remix Antd Admin
一款基于 Remix
/ Antd
/ Echarts
/ Styled-components
的管理系統(tǒng),可快速進(jìn)行項(xiàng)目初始化。(本項(xiàng)目偏前端)
Project experience URL
訪問(wèn)地址(注意部署在 vercel):remix-antd-admin.vercel.app/
項(xiàng)目倉(cāng)庫(kù)地址:github.com/yyong008/re…
Current Remix Version
1.51.0
設(shè)計(jì)動(dòng)機(jī)
Remix 的設(shè)計(jì)范式簡(jiǎn)單方便,整個(gè)應(yīng)用就是一個(gè)路由器,并且是前后端打通的路由器。表單設(shè)計(jì)使得 Remix 的表單能力更加簡(jiǎn)單方便。在后臺(tái)管理系統(tǒng)中,數(shù)據(jù)展示與數(shù)據(jù)錄入,以及頁(yè)面切換占據(jù)重要位置,Remix 設(shè)計(jì)似乎特貼的簡(jiǎn)單貼切。集成 Antd UI 項(xiàng)目能力,能快速實(shí)現(xiàn)具有漂亮 UI 簡(jiǎn)單的后臺(tái)管理系統(tǒng)。
核心包
包 | 說(shuō)明 |
---|---|
remix | 1.51.0(核心包) |
antd | 5.3.1(核心 UI 包) |
styled-components | css-in-js 解決方案(核心 css 解決方案) |
remix-utils | Remix 的 常用工具,例如:僅僅在服務(wù)端然組件 <ClientOnly> 組件(核心工具) |
國(guó)際化
國(guó)際化包 | 說(shuō)明 |
---|---|
remix-i18next | 很容的方式翻譯你的 remix 應(yīng)用 |
i18next | - |
react-i18next | - |
i18next-browser-languagedetector | - |
圖表庫(kù)
選圖表注意支持 ssr
圖表庫(kù) | 說(shuō)明 |
---|---|
echarts | 5.3.9 主要圖表(考慮 Remix 需要服務(wù)端渲染等問(wèn)題) |
echarts-for-react | 基于 React 封裝 echarts 組件 |
react-mind | React 腦圖 |
react-mindmap | React 腦圖 |
react-wordcloud | React 云詞圖 支持 ssr |
reactflow | 流程圖 |
echarts-liquidfill-ssr | 水滴圖 |
裁剪工具
pnpm install react-advanced-cropper
Remix 優(yōu)點(diǎn)
簡(jiǎn)單明了的路由書(shū)寫范式,簡(jiǎn)單的數(shù)據(jù)獲取和表單能力
- 強(qiáng)大的文件路由范式
- loader 獲取數(shù)據(jù)
- action 處理表單數(shù)據(jù)
用法
使用 pnpm
# 服務(wù)器 pnpm run dev # pnpm dev # 構(gòu)建 pnpm run build # pnpm build # 開(kāi)發(fā)環(huán)境服務(wù)器 pnpm run start # pnpm start
格式化工具
"scripts": { "prettier": "prettier --write app/ public/locales" },
支持
目前作者長(zhǎng)期處于愛(ài)發(fā)電的狀態(tài),如果本項(xiàng)目能夠幫助到你不妨請(qǐng)作者喝一杯咖啡,有你的支持,開(kāi)源項(xiàng)目將得到更好的維護(hù),也崔進(jìn)輸出更加高質(zhì)量的代碼,當(dāng)然也可以參與到此項(xiàng)目中成為項(xiàng)目的參與者,同時(shí)期望提出寶貴意見(jiàn)以便項(xiàng)目能得到更好的維護(hù)和發(fā)展。
以上就是Remix后臺(tái)開(kāi)發(fā)之remix-antd-admin配置過(guò)程的詳細(xì)內(nèi)容,更多關(guān)于remix-antd-admin后臺(tái)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React中使用react-player 播放視頻或直播的方法
這篇文章主要介紹了React中使用react-player 播放視頻或直播,本文教大家如何使用react框架及創(chuàng)建實(shí)例的代碼,本文內(nèi)容簡(jiǎn)短給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01react-native-video實(shí)現(xiàn)視頻全屏播放的方法
這篇文章主要介紹了react-native-video實(shí)現(xiàn)視頻全屏播放的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式
這篇文章主要介紹了react中使用echarts,并實(shí)現(xiàn)tooltip循環(huán)輪播方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01Can't?perform?a?React?state?update?on?an?unmoun
這篇文章主要為大家介紹了Can't?perform?a?React?state?update?on?an?unmounted?component報(bào)錯(cuò)解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12淺談React多個(gè)setState會(huì)調(diào)用幾次
在React的生命周期鉤子和合成事件中,多次執(zhí)行setState,會(huì)被調(diào)用幾次,本文就詳細(xì)的介紹一下,感興趣的可以了解一下2021-11-11React Electron生成桌面應(yīng)用過(guò)程
這篇文章主要介紹了React+Electron快速創(chuàng)建并打包成桌面應(yīng)用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-12-12react實(shí)現(xiàn)復(fù)選框全選和反選組件效果
這篇文章主要為大家詳細(xì)介紹了react實(shí)現(xiàn)復(fù)選框全選和反選組件效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08