Remix 后台桌面开发electron-remix-antd-admin

目录
  • Remix Antd Admin Electron
    • 项目地址
    • 当前 Remix 版本
  • 设计动机
  • Core Packages
  • 增加左面主文件
  • 增加 Remix 配置文件
  • 增加 nodemon.json
  • 核心包
    • 国际化
    • 图表库
    • 裁剪工具
  • 优点
  • npmrc config
  • 使用方法
    • 格式化工具
  • 构建
  • 支持

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-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

优点

简单明了的路由书写范式，简单的数据获取和表单能力

  • 强大的文件路由范式
  • 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 然后就可以直接安装了

支持

目前作者长期处于爱发电的状态，如果本项目能够帮助到你不妨请作者喝一杯咖啡，有你的支持，开源项目将得到更好的维护，也崔进输出更加高质量的代码，当然也可以参与到此项目中成为项目的参与者，同时期望提出宝贵意见以便项目能得到更好的维护和发展。

以上就是Remix 后台桌面开发electron-remix-antd-admin的详细内容，更多关于electron-remix-antd-admin桌面的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Remix如何支持原生 CSS方法详解

    目录 Remix CSS 语法 links 函数写法 links 函数层级 links 函数中 css 媒体查询 第三方 css import 语法 小结 Remix CSS 语法 Remix 是一个多页面的框架,对页面的原生 CSS 的支持分为两大类型: 使用 links 函数,转换成 link 标签支持 css 使用 javascript import 语法支持 css ,但是最终也会成为 link 标签 驼峰命名法 .PrimaryButton { /* ... */ } html 属性法

  • Remix后台开发之remix-antd-admin配置过程

    目录 Remix Antd Admin Project experience URL Current Remix Version 设计动机 核心包 国际化 图表库 裁剪工具 Remix 优点 用法 格式化工具 支持 Remix Antd Admin 一款基于 Remix / Antd / Echarts / Styled-components 的管理系统,可快速进行项目初始化.(本项目偏前端) Project experience URL 访问地址(注意部署在 vercel):remix-ant

  • Remix中mdx table不支持表格解决

    目录 remix 配置文件中配置 mdx 属性 添加插件 remark-gfm remix 配置文件中配置 mdx 属性 remix 中支持 md/mdx 语法,但是 Remix 语法没有内置对 markdown 表格的支持. mdx 配置在 Remix 文档很不明显,从 remix 的配置文件的 .d.ts 文件. export interface AppConfig { mdx?: RemixMdxConfig | RemixMdxConfigFunction; } export inter

  • 全栈轻量级搭配之Remix Prisma Sqlite使用分析

    目录 一.为什么是 Remix/Prisma/Sqlite ? 二.Prisma 命令提前看 三.在 Remix 中添加 Sqlite 和 Prisma 的流程如下: 1.安装依赖 2.用 sqlite 初始化 prisma 3.在 Schema 文件中添加模型 4.生成客户端代码 5.使用迁移命令 6.在 studio 中查看 7.在 Remix 中使用 ①. 对外暴露 db ②. 抽象模型层 ③. 在 action/loader 中使用模型层操作数据库 ④. 额外的 seed 初始化 四.流

  • Remix 路由模块输出对象handle函数

    目录 正文 在哪里可以定义 handle? 在根路由定义 在页面 _index 路由中与 useMatch 一起 match 数组 使用场景 正文 Remix handle 函数是一个有用的对外输出的 Route 模块对象,用于暴露特定的数据 match 对象,它们经常在一起使用. 当前 Remix 版本:1.15.0 在哪里可以定义 handle? root 根组件 路由页面 在根路由定义 import { /.../ } from "@remix-run/react"; // 根路

  • Remix路由模块输出对象loader函数详解

    目录 主要内容 loader 函数定义 loader 函数配合 useLoaderData 一起使用 loader 函数返回值 loader 函数的类型 loader 函数中获取 params loader 函数中处理 headers loader 函数上下文 loader 中重定向到 错误处理 在页面中的表现 loader 作为纯 api 输出数据使用 小结 主要内容 Remix loader 函数是一个获取当前页面页面数据的函数,经常与 useLoaderData 一起配合使用 当前 Rem

  • 适合后台管理系统开发的12个前端框架(小结)

    适合后台管理系统开发的12个前端框架(小结)

    1.D2admin 开源地址:https://github.com/d2-projects/d2-admin 文档地址:https://d2.pub/zh/doc/d2-admin/ 效果预览:https://d2.pub/d2-admin/preview/#/index 开源协议:MIT 2.vue-element-admin 开源地址:https://github.com/PanJiaChen/vue-element-admin 文档地址:https://panjiachen.github.

  • JQuery EasyUI 结合ztrIee的后台页面开发实例

    JQuery EasyUI 结合 zTree树形结构制作web页面.easyui用起来比较简单,很好的封装了jquery的部分功能,使用起来更加方便,但是从1.2.3版本以后,商业用途是需要付费的, zTree是国内的大牛们搞的一个jquery树形tree插件,感觉很好用,很强大,而且完全免费,API等做的也非常不错.推荐 easyui 是一个基于 jQuery 的框架,集成了各种用户界面插件. easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能. 使用 easy

  • Java后台接口开发初步实战教程

    Java后台接口开发初步实战教程

    上图是查询列表的接口,get方式 上图是用户注册的接口,同样是get,post方式也很简单 开发工具:IntelliJ IDEA 2016.3.5 ORM框架:MyBatis 数据库:MySql 服务器:tomcat7.0 公司使用的的orm框架是Hibernate,使用起来感觉比mybatis好用多了,毕竟经过了公司这么多项目的考验,总比自己用mybatis写的项目可靠,但以下分享的还是mybatis的代码 注册接口方法:http://192.168.1.116:8080/register?u

  • vue项目打包成桌面快捷方式(electron)的方法

    vue项目打包成桌面快捷方式(electron)的方法

    网上有很多相关的例子了,所以我只是把自己的问题记录一下. 1.把electron的官方例子clone下来 git clone https://github.com/electron/electron-quick-start 2.进入项目,输入以下命令,运行项目 npm install//下载依赖包 npm start//启动 3.弹出界面 4.接下来将自己的vue项目打包,运行npm run build 5.将打包的项目复制到electron-quick-start的根目录 6.重新运行一下 n

  • Flutter桌面开发windows插件开发

    目录 前言 插件介绍 windows插件编写 Windows插件的一些坑 前言 通过此篇文章,你将了解到: Flutter插件的基本介绍: windows插件开发的真实踩坑经验. 我们都知道,Flutter的定位更多是作为一个跨平台的UI框架,对于原生平台的功能,开发过程中经常需要插件来提供.不幸的是Windows的生态又极其不完整,插件开发必不可少.但网上windows的文章少之又少,所以本篇文章,我们一起来聊聊插件开发的一些技巧. 插件介绍 Flutter的插件主要分两种:package和p

  • 详解Vue后台管理系统开发日常总结(组件PageHeader)

    在后台管理系统的日常开发过程中发现对于同一个业务下面的版块不同的开发同事每次都会重复写页面标题的样式,而且不同的页面标题还不太一样.虽然有的页面标题栏承载的元素不一样,但是也有通用的部分,经过多个项目的迭代慢慢地总结与积累完善出了一个通用的页面标题组件<PageHeader/>. 下面是一个最常见的标题设计原型: 下面是同事给出的封装方案: 使用方式 <router-back class="router-back" text="详情" />

  • SpringBoot + Vue + Electron 开发 QQ 版聊天工具的详细教程

    一.简介 这是一款基于 JS 实现的超轻量级桌面版聊天软件.主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket.也支持web网页聊天实现.文字聊天,互传文件,离线消息,群聊,断线重连等功能. 先看一下效果,下图左边是web版,右边为PC版. 二.本地搭建 2.1 技术栈 后端技术栈: springboot: 让开发人员快速开发的一款Java的微服务框架. tio: 是百万级网络框架oauth2.0: OAuth 2.0 是一个行业的标准授权协议. OAuth 2

  • springboot嵌套子类使用方式—前端与后台开发的注意事项

    目录 springboot嵌套子类使用 实际Bean类 UserMapper.java  对于一对一 前台使用bootstrap-table进行解析显示 后台Controller转换成Json会出现 $ref 注解在嵌套方法不生效问题 例如在service中方法如下 springboot嵌套子类使用 在实际项目里,我们会使用到一个User用户含有子类Address.这种嵌套子类在开发中会遇到很多问题,现在主要针对前台和后台的开发问题进行整理. 实际Bean类 User类里含有Address类 p

  • Android开发Flutter 桌面应用窗口化实战示例

    Android开发Flutter 桌面应用窗口化实战示例

    目录 前言 一.应用窗口的常规配置 应用窗口化 自定义窗口导航栏 美化应用窗口 二.windows平台特定交互 注册表操作 执行控制台指令 实现应用单例 三.桌面应用的交互习惯 按钮点击态 获取应用启动参数 四.写在最后 前言 通过此篇文章,你可以编写出一个完整桌面应用的窗口框架. 你将了解到: Flutter在开发windows和Android桌面应用初始阶段,应用窗口的常规配置: windows平台特定交互的实现,如:执行控制台指令,windows注册表,应用单例等: 桌面应用的交互习惯,如

  • 详解Webpack实战之构建 Electron 应用

    Electron可以让你使用开发 Web 的技术去开发跨平台的桌面端应用,由 Github 主导和开源,大家熟悉的 Atom 和 VSCode 编辑器就是使用 Electron 开发的. Electron 是 Node.js 和 Chromium 浏览器的结合体,用 Chromium 浏览器显示出的 Web 页面作为应用的 GUI,通过 Node.js 去和操作系统交互. 当你在 Electron 应用中的一个窗口操作时,实际上是在操作一个网页.当你的操作需要通过操作系统去完成时,网页会通过 N

随机推荐