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-antd-admin.vercel.app/

项目仓库地址：github.com/yyong008/re…

Current Remix Version

1.51.0

设计动机

Remix 的设计范式简单方便，整个应用就是一个路由器，并且是前后端打通的路由器。表单设计使得 Remix 的表单能力更加简单方便。在后台管理系统中，数据展示与数据录入，以及页面切换占据重要位置，Remix 设计似乎特贴的简单贴切。集成 Antd UI 项目能力，能快速实现具有漂亮 UI 简单的后台管理系统。

核心包

包 说明
remix 1.51.0（核心包）
antd 5.3.1（核心 UI 包）
styled-components css-in-js 解决方案（核心 css 解决方案）
remix-utils Remix 的 常用工具，例如：仅仅在服务端然组件 <ClientOnly> 组件（核心工具）

国际化

国际化包 说明
remix-i18next 很容的方式翻译你的 remix 应用
i18next -
react-i18next -
i18next-browser-languagedetector -

图表库

选图表注意支持 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

Remix 优点

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

  • 强大的文件路由范式
  • loader 获取数据
  • action 处理表单数据

用法

使用 pnpm

# 服务器
pnpm run dev # pnpm dev
# 构建
pnpm run build # pnpm build
# 开发环境服务器
pnpm run start # pnpm start

格式化工具

"scripts": {
    "prettier": "prettier --write app/ public/locales"
},

支持

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

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

赞 (0)

相关推荐

  • 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路由模块输出对象loader函数详解

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

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

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

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

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

  • 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 的管理系统,能够快速初始化项目. 项目地址

  • 全栈轻量级搭配之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 初始化 四.流

  • python GUI库图形界面开发之PyQt5开发环境配置与基础使用

    python GUI库图形界面开发之PyQt5开发环境配置与基础使用

    PyQt5安装 在cmd下输入 pip install PyQt5 完成PyQt5安装,再安装qt designer,可以使用pip安装 pip install PyQt5-tools 安装完成后,在python安装目录下可以看到 配置PyCharm 配置PyCharm是为了在Pycharm里面实现打开qt designer,然后生成qt文件,然后将qt文件转换成python语言的软件文件. 打开Pycharm,按下图操作 打开Extrernal Tools之后,点击上如绿色的+,添加Tools

  • JavaWeb开发之【Tomcat 环境配置】MyEclipse+IDEA配置教程

    MyEclipse配置 IDEA配置Tomcat 环境 IDEA:2020.2 Tomcat:apache-tomcat-9.0.38 创建Web项目 Q1:Tomcat启动输出乱码 Q2:Servlet中使用 System.out,Tomcat控制台输出乱码 一:创建Web项目 1> 创建普通项目,添加框架支持 2> 为项目配置Tomcat 3> 部署项目到Tomcat 4> 手动添加依赖包 二:Tomcat启动输出乱码 -Dfile.encoding=UTF-8 三:Servl

  • JSP 开发之hibernate配置二级缓存的方法

    JSP 开发之hibernate配置二级缓存的方法 hibernate二级缓存也称为进程级的缓存或SessionFactory级的缓存. 二级缓存是全局缓存,它可以被所有的session共享. 二级缓存的生命周期和SessionFactory的生命周期一致,SessionFactory可以管理二级缓存. 常用的缓存插件 Hibernater二级缓存是一个插件,下面是几种常用的缓存插件: EhCache:可作为进程范围的缓存,存放数据的物理介质可以是内存或硬盘,对Hibernate的查询缓存提供了

  • SpringBoot+Vue开发之Login校验规则、实现登录和重置事件

    一.Login校验规则 1.校验规则写法可参考Element-ui官网文档 https://element.eleme.cn/#/zh-CN/component/form 2.Login.vue页面  <template> <div class="login_container"> <!-- 登录块 --> <div class="login_box"> <!-- 头像 --> <div class=

  • JSP 开发之Spring Security详解

    JSP 开发之Spring Security详解 前言: spring Security是一个能够为基于Spring的企业应用系统提供描述性安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spring IoC(依赖注入,也称控制反转)和AOP(面向切面编程)功能,为应用系统提供声明式的安全访问控制功能,减少了为企业系统安全控制编写大量重复代码的工作. Spring Security 的前身是 Acegi Security ,是 Spring 项

  • Java开发之spring security实现基于MongoDB的认证功能

    本文实例讲述了Java开发之spring security实现基于MongoDB的认证功能.分享给大家供大家参考,具体如下: spring security对基于数据库的认证支持仅限于JDBC,而很多项目并非使用JDBC,比如Nosql数据库很多使用的是 Mongo Java Driver,这样就无法用默认的<jdbc-user-service>进行支持认证. 如果项目不是使用JDBC,没么解决办法就是:自己定义一个认证服务. 新建一个CustomUserDetailsService类 这个类

  • Python开发之Nginx+uWSGI+virtualenv多项目部署教程

    1.新建独立运行环境,命名为env [root@vultr ~]# mkdir projects # 测试的项目总目录 [root@vultr ~]# pip3 install virtualenv [root@vultr ~]# cd projects [root@vultr projects]# virtualenv env --python=python3 --no-site-packages --python:指定Python版本 --no-site-packages:不复制系统已安装P

  • .NET微信开发之PC 端微信扫码注册和登录功能实现

    .NET微信开发之PC 端微信扫码注册和登录功能实现

    一.前言 先声明一下,本文所注重点为实现思路,代码及数据库设计主要为了展现思路,如果对代码效率有着苛刻要求的项目切勿照搬. 相信做过微信开发的人授权这块都没少做过,但是一般来说我们更多的是为移动端的网站做授权,确切来说是在微信端下做的一个授权.今天遇到的一个问题是,项目支持微信端以及 PC 端,并且开放注册.要求做到无论在 PC 端注册或者是在微信端注册之后都可以在另外一个端进行登录.也就是说无论 PC 或是微信必须做到"你就是你"(通过某种方式关联). 二.寻找解决方案 按传统的方式

  • JSP 开发之Struts2内建自定义拦截器

    JSP 开发之Struts2内建自定义拦截器 Struts2的自定义拦截器主要用于解析请求参数,将请求参数赋值给Action属性,执行数据校验,文件上传等等操作.当需要扩展Struts2的功能时,我们只需要提供相应的拦截器并将它配置到Struts2容器中即可:当我们不需要使用的时候,只需要取消它在Struts2容器中的配置就行了. 1>配置拦截器主要使用四个配置元素: :用于配置自定义拦截器 :用于引用拦截器或者拦截器栈 :用于配置自定义拦截器栈,一个拦截器栈由多个拦截器构成,也可以包含其他的拦

  • JavaScript模块化开发之SeaJS

    前言   SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制.使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护. SeaJS本身遵循KISS(Keep it Simple,Stupid)理念进行开发,后续的几个版本更新也都是吵着这个方向迈进. 如何使用SeaJS 下载及安装在这里不赘述了,不了解的请查询官网. 基

随机推荐