Remix后臺(tái)開發(fā)之remix-antd-admin配置過程
Remix Antd Admin
一款基于 Remix / Antd / Echarts / Styled-components 的管理系統(tǒng)，可快速進(jìn)行項(xiàng)目初始化。（本項(xiàng)目偏前端）
Project experience URL
訪問地址（注意部署在 vercel）：remix-antd-admin.vercel.app/
項(xiàng)目倉庫地址：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ù)錄入，以及頁面切換占據(jù)重要位置，Remix 設(shè)計(jì)似乎特貼的簡(jiǎn)單貼切。集成 Antd UI 項(xiàng)目能力，能快速實(shí)現(xiàn)具有漂亮 UI 簡(jiǎn)單的后臺(tái)管理系統(tǒng)。
核心包
| 包 | 說明 |
|---|---|
| remix | 1.51.0（核心包） |
| antd | 5.3.1（核心 UI 包） |
| styled-components | css-in-js 解決方案（核心 css 解決方案） |
| remix-utils | Remix 的 常用工具，例如：僅僅在服務(wù)端然組件 <ClientOnly> 組件（核心工具） |
國際化
| 國際化包 | 說明 |
|---|---|
| remix-i18next | 很容的方式翻譯你的 remix 應(yīng)用 |
| i18next | - |
| react-i18next | - |
| i18next-browser-languagedetector | - |
圖表庫
選圖表注意支持 ssr
| 圖表庫 | 說明 |
|---|---|
| echarts | 5.3.9 主要圖表（考慮 Remix 需要服務(wù)端渲染等問題） |
| 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)單明了的路由書寫范式，簡(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 # 開發(fā)環(huán)境服務(wù)器 pnpm run start # pnpm start
格式化工具
"scripts": {
"prettier": "prettier --write app/ public/locales"
},
支持
目前作者長(zhǎng)期處于愛發(fā)電的狀態(tài)，如果本項(xiàng)目能夠幫助到你不妨請(qǐng)作者喝一杯咖啡，有你的支持，開源項(xiàng)目將得到更好的維護(hù)，也崔進(jìn)輸出更加高質(zhì)量的代碼，當(dāng)然也可以參與到此項(xiàng)目中成為項(xiàng)目的參與者，同時(shí)期望提出寶貴意見以便項(xiàng)目能得到更好的維護(hù)和發(fā)展。
以上就是Remix后臺(tái)開發(fā)之remix-antd-admin配置過程的詳細(xì)內(nèi)容，更多關(guān)于remix-antd-admin后臺(tái)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
基于PixiJS實(shí)現(xiàn)react圖標(biāo)旋轉(zhuǎn)動(dòng)效
PixiJS是一個(gè)開源的基于web的渲染系統(tǒng)，為游戲、數(shù)據(jù)可視化和其他圖形密集型項(xiàng)目提供了極快的性能，這篇文章主要介紹了用PixiJS實(shí)現(xiàn)react圖標(biāo)旋轉(zhuǎn)動(dòng)效,需要的朋友可以參考下2022-05-05
React創(chuàng)建對(duì)話框組件的方法實(shí)例
在項(xiàng)目開發(fā)過程中,對(duì)于復(fù)雜的業(yè)務(wù)選擇功能很常見,下面這篇文章主要給大家介紹了關(guān)于React創(chuàng)建對(duì)話框組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
React/Redux應(yīng)用使用Async/Await的方法
本篇文章主要介紹了React/Redux應(yīng)用使用Async/Await的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
react16+antd4 RangePicker組件實(shí)現(xiàn)時(shí)間禁選示例
這篇文章主要為大家介紹了react16+antd4 RangePicker 時(shí)間禁選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
webpack手動(dòng)配置React開發(fā)環(huán)境的步驟
本篇文章主要介紹了webpack手動(dòng)配置React開發(fā)環(huán)境的步驟，webpack手動(dòng)配置一個(gè)獨(dú)立的React開發(fā)環(huán)境, 開發(fā)環(huán)境完成后, 支持自動(dòng)構(gòu)建, 自動(dòng)刷新, sass語法 等功能...感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要介紹了React如何動(dòng)態(tài)控制偽元素樣式問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
40行代碼把Vue3的響應(yīng)式集成進(jìn)React做狀態(tài)管理
這篇文章主要介紹了40行代碼把Vue3的響應(yīng)式集成進(jìn)React做狀態(tài)管理,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
這篇文章主要介紹了react中使用usestate踩坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了react中常見hook的使用方式與區(qū)別，幫助大家更好的理解和學(xué)習(xí)使用react，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家介紹了React元素與組件的區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11