Remix后臺(tái)開發(fā)之remix-antd-admin配置過程

更新時(shí)間：2023年04月13日 09:25:35 作者：喬治_x

這篇文章主要為大家介紹了Remix后臺(tái)開發(fā)之remix-antd-admin配置過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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ì)范式簡單方便，整個(gè)應(yīng)用就是一個(gè)路由器，并且是前后端打通的路由器。表單設(shè)計(jì)使得 Remix 的表單能力更加簡單方便。在后臺(tái)管理系統(tǒng)中，數(shù)據(jù)展示與數(shù)據(jù)錄入，以及頁面切換占據(jù)重要位置，Remix 設(shè)計(jì)似乎特貼的簡單貼切。集成 Antd UI 項(xiàng)目能力，能快速實(shí)現(xiàn)具有漂亮 UI 簡單的后臺(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	水滴圖

裁剪工具

react-advanced-cropper

pnpm install react-advanced-cropper

Remix 優(yōu)點(diǎ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"
},

支持

目前作者長期處于愛發(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)文章！

您可能感興趣的文章: