目录Remix Antd Admin Electron项目地址当前 Remix 版本设计动机Core Packages增加左面主文件增加 Remix 配置文件增加 nodemon.J
基于 Electron
/Remix
/Antd
/Echarts
/Styled-components
的管理系统,能够快速初始化项目。
electron repo: GitHub.com/yyong008/re…
WEB websit: remix-antd-admin.vercel.app/
1.51.0
Remix 的设计范式简单方便,整个应用就是一个路由器,并且是前后端打通的路由器。表单设计使得 Remix 的表单能力更加简单方便。在后台管理系统中,数据展示与数据录入,以及页面切换占据重要位置,Remix 设计似乎特贴的简单贴切。集成 Antd UI 项目能力,能快速实现具有漂亮 UI 简单的后台管理系统。
electron package | desc |
---|---|
remix-electron | Electron 集成到 Remix ⚛💿 |
electron | 核心包 |
@remix-run/server-runtime | remix 运行时 |
nodemon | 监听文件自动更新文件 |
const { initRemix } = require("remix-electron");
const { app, BrowserWindow, dialog } = require("electron");
const { join } = require("node:path");
let win;
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);
}
});
function getErrorStack(error) {
return error instanceof Error ? error.stack || error.message : String(error);
}
// remix.config.js
module.exports = {
serverBuildPath: "desktop/build/index.js",
// ...
};
{
"$schema": "https://json.schemastore.org/nodemon.json",
"exec": "electron",
"watch": ["desktop"],
"ignore": ["desktop/build"],
"execMap": {
"ts": "ts-node"
}
}
国际化包 | 说明 |
---|---|
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 | 水滴图 |
pnpm install react-advanced-cropper
简单明了的路由书写范式,简单的数据获取和表单能力
# 将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
然后就可以直接安装了目前作者长期处于爱发电的状态,如果本项目能够帮助到你不妨请作者喝一杯咖啡,有你的支持,开源项目将得到更好的维护,也崔进输出更加高质量的代码,当然也可以参与到此项目中成为项目的参与者,同时期望提出宝贵意见以便项目能得到更好的维护和发展。
以上就是Remix 后台桌面开发electron-remix-antd-admin的详细内容,更多关于electron-remix-antd-admin桌面的资料请关注编程网其它相关文章!
--结束END--
本文标题: Remix后台桌面开发electron-remix-antd-admin
本文链接: https://www.lsjlt.com/news/209253.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
一口价域名售卖能注册吗?域名是网站的标识,简短且易于记忆,为在线用户提供了访问我们网站的简单路径。一口价是在域名交易中一种常见的模式,而这种通常是针对已经被注册的域名转售给其他人的一种方式。
一口价域名买卖的过程通常包括以下几个步骤:
1.寻找:买家需要在域名售卖平台上找到心仪的一口价域名。平台通常会为每个可售的域名提供详细的描述,包括价格、年龄、流
443px" 443px) https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294.jpg https://www.west.cn/docs/wp-content/uploads/2024/04/SEO图片294-768x413.jpg 域名售卖 域名一口价售卖 游戏音频 赋值/切片 框架优势 评估指南 项目规模
0