Remix 后臺桌面開發(fā)electron-remix-antd-admin

更新時間：2023年04月13日 09:08:20 作者：喬治_x

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

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è)計動機(jī)

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 運(yùn)行時
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	水滴圖

裁剪工具

react-advanced-cropper

pnpm install react-advanced-cropper

優(yōu)點

簡單明了的路由書寫范式，簡單的數(shù)據(jù)獲取和表單能力

強(qiáng)大的文件路由范式
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)，如果本項目能夠幫助到你不妨請作者喝一杯咖啡，有你的支持，開源項目將得到更好的維護(hù)，也崔進(jìn)輸出更加高質(zhì)量的代碼，當(dāng)然也可以參與到此項目中成為項目的參與者，同時期望提出寶貴意見以便項目能得到更好的維護(hù)和發(fā)展。

以上就是Remix 后臺桌面開發(fā)electron-remix-antd-admin的詳細(xì)內(nèi)容，更多關(guān)于electron-remix-antd-admin桌面的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: