Remix 后臺桌面開發(fā)electron-remix-antd-admin
Remix Antd Admin Electron
基于 Electron
/Remix
/Antd
/Echarts
/Styled-components
的管理系統(tǒng),能夠快速初始化項目。
項目地址
electron repo: github.com/yyong008/re…
Web websit: remix-antd-admin.vercel.app/
當(dāng)前 Remix 版本
1.51.0
設(shè)計動機
Remix 的設(shè)計范式簡單方便,整個應(yīng)用就是一個路由器,并且是前后端打通的路由器。表單設(shè)計使得 Remix 的表單能力更加簡單方便。在后臺管理系統(tǒng)中,數(shù)據(jù)展示與數(shù)據(jù)錄入,以及頁面切換占據(jù)重要位置,Remix 設(shè)計似乎特貼的簡單貼切。集成 Antd UI 項目能力,能快速實現(xiàn)具有漂亮 UI 簡單的后臺管理系統(tǒng)。
Core Packages
electron package | desc |
---|---|
remix-electron | Electron 集成到 Remix ??? |
electron | 核心包 |
@remix-run/server-runtime | remix 運行時 |
nodemon | 監(jiān)聽文件自動更新文件 |
增加左面主文件
- desktop/main.js
const { initRemix } = require("remix-electron"); const { app, BrowserWindow, dialog } = require("electron"); const { join } = require("node:path"); /** @type {BrowserWindow | undefined} */ let win; /** @param {string} url */ async function createWindow(url) { win = new BrowserWindow({ show: false }); await win.loadURL(url); win.show(); if (process.env.NODE_ENV === "development") { win.webContents.openDevTools(); } } app.on("ready", async () => { try { if (process.env.NODE_ENV === "development") { const { default: installExtension, REACT_DEVELOPER_TOOLS, } = require("electron-devtools-installer"); await installExtension(REACT_DEVELOPER_TOOLS); } const url = await initRemix({ serverBuild: join(__dirname, "build") }); await createWindow(url); } catch (error) { dialog.showErrorBox("Error", getErrorStack(error)); console.error(error); } }); /** @param {unknown} error */ function getErrorStack(error) { return error instanceof Error ? error.stack || error.message : String(error); }
增加 Remix 配置文件
// remix.config.js /** * @type {import('@remix-run/dev/config').AppConfig} */ module.exports = { serverBuildPath: "desktop/build/index.js", // ... };
增加 nodemon.json
{ "$schema": "https://json.schemastore.org/nodemon.json", "exec": "electron", "watch": ["desktop"], "ignore": ["desktop/build"], "execMap": { "ts": "ts-node" } }
核心包
國際化
國際化包 | 說明 |
---|---|
remix-i18next | 很容的方式翻譯你的 remix 應(yīng)用 |
圖表庫
選圖表注意支持 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
優(yōu)點
簡單明了的路由書寫范式,簡單的數(shù)據(jù)獲取和表單能力
- 強大的文件路由范式
- loader 獲取數(shù)據(jù)
- action 處理表單數(shù)據(jù)
npmrc config
# 將pnpm變成扁平化架構(gòu) node-linker=hoisted # 在國內(nèi)使用pnpm安裝electron需要配置一下electron的下載路徑 electron_mirror="https://npm.taobao.org/mirrors/electron/"
使用方法
Use pnpm
# server pnpm run dev # pnpm dev # build pnpm run build # pnpm build
格式化工具
"scripts": { "prettier": "prettier --write app/ public/locales" }
格式化代碼命令
pnpm run prettier
構(gòu)建
pnpm run build
構(gòu)建完畢,如果正常會在 dist 目錄下生成一個 exe 后綴的文件。
dist/remix-antd-admin Setup <package.json version>.exe
然后就可以直接安裝了
支持
目前作者長期處于愛發(fā)電的狀態(tài),如果本項目能夠幫助到你不妨請作者喝一杯咖啡,有你的支持,開源項目將得到更好的維護,也崔進輸出更加高質(zhì)量的代碼,當(dāng)然也可以參與到此項目中成為項目的參與者,同時期望提出寶貴意見以便項目能得到更好的維護和發(fā)展。
以上就是Remix 后臺桌面開發(fā)electron-remix-antd-admin的詳細內(nèi)容,更多關(guān)于electron-remix-antd-admin桌面的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
React native ListView 增加頂部下拉刷新和底下點擊刷新示例
這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點擊刷新示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-04-04React-Native中禁用Navigator手勢返回的示例代碼
本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-09-09再次談?wù)揜eact.js實現(xiàn)原生js拖拽效果引起的一系列問題
React 起源于 Facebook 的內(nèi)部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設(shè) Instagram 的網(wǎng)站.本文給大家介紹React.js實現(xiàn)原生js拖拽效果,需要的朋友一起學(xué)習(xí)吧2016-04-04基于React.js實現(xiàn)原生js拖拽效果引發(fā)的思考
這篇文章主要為大家詳細介紹了基于React.js實現(xiàn)原生js拖拽效果,繼而引發(fā)的一系列思考,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-03-03