Remix Antd Admin Electron
根据 Electron
/Remix
/Antd
/Echarts
/Styled-components
的办理系统,可以快速初始化项目。
项目地址
electron repo: github.com/yyong008/re…
Web websit: remix-antd-admin.vercel.app/
当时 Remix 版别
1.51.0
规划动机
Remix 的规划范式简略方便,整个应用就是一个路由器,并且是前后端打通的路由器。表单规划使得 Remix 的表单才能愈加简略方便。在后台办理系统中,数据展示与数据录入,以及页面切换占据重要方位,Remix 规划似乎特贴的简略恰当。集成 Antd UI 项目才能,能快速实现具有美丽 UI 简略的后台办理系统。
Core Packages
electron package | desc |
---|---|
remix-electron | Electron 集成到 Remix ⚛ |
electron | 中心包 |
@remix-run/server-runtime | remix 运行时 |
nodemon | 监听文件自动更新文件 |
添加左边主文件
- 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 | 1.51.0(中心包) |
antd | 5.3.1(中心 UI 包) |
styled-components | css-in-js 解决方案(中心 css 解决方案) |
remix-utils | Remix 的 常用工具,例如:仅仅在服务端然组件<ClientOnly> 组件(中心工具) |
国际化
国际化包 | 阐明 |
---|---|
remix-i18next | 很容的方法翻译你的 remix 应用 |
图表库
选图表留意支撑 ssr
图表库 | 阐明 |
---|---|
echarts | 5.3.9 主要图表(考虑 Remix 需求服务端渲染等问题) |
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
优点
简略明了的路由书写范式,简略的数据获取和表单才能
- 强大的文件路由范式
- loader 获取数据
- action 处理表单数据
npmrc config
# 将pnpm变成扁平化架构
node-linker=hoisted
# 在国内运用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
构建
pnpm run build
构建完毕,假如正常会在 dist 目录下生成一个 exe 后缀的文件。
-
dist/remix-antd-admin Setup <package.json version>.exe
然后就可以直接装置了
支撑
现在作者长时间处于爱发电的状况,假如本项目可以协助到你无妨请作者喝一杯咖啡,有你的支撑,开源项目将得到更好的保护,也崔进输出愈加高质量的代码,当然也可以参与到此项目中成为项目的参与者,一起期望提出宝贵意见以便项目能得到更好的保护和发展。
共享
感谢您抽出时间来阅读这篇文章。假如它对您有协助或许启发,请考虑给它一个点赞,这将鼓励咱们持续为您供给更好的内容。一起,咱们的公众号(进二开物
)会不定期共享相似的内容,假如您感兴趣,欢迎关注咱们。再次感谢您的阅读和支撑!