欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2023年04月13日 09:08:20   作者:喬治_x  
這篇文章主要為大家介紹了Remix 后臺桌面開發(fā)electron-remix-antd-admin的過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪

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

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 packagedesc
remix-electronElectron 集成到 Remix ???
electron核心包
@remix-run/server-runtimeremix 運行時
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

圖表庫說明
echarts5.3.9 主要圖表(考慮 Remix 需要服務(wù)端渲染等問題)
echarts-for-react基于 React 封裝 echarts 組件
react-mindReact 腦圖
react-mindmapReact 腦圖
react-wordcloudReact 云詞圖 支持 ssr
reactflow流程圖
echarts-liquidfill-ssr水滴圖

裁剪工具

pnpm install react-advanced-cropper

優(yōu)點

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

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

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

相關(guān)文章

  • ReactRouter的實現(xiàn)方法

    ReactRouter的實現(xiàn)方法

    這篇文章主要介紹了ReactRouter的實現(xiàn),本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-01-01
  • React組件二次包裝的具體實現(xiàn)

    React組件二次包裝的具體實現(xiàn)

    本文主要介紹了React組件二次包裝的具體實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • ahooks解決用戶多次提交方法示例

    ahooks解決用戶多次提交方法示例

    這篇文章主要為大家介紹了ahooks解決用戶多次提交的方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07
  • React冒泡和阻止冒泡的應(yīng)用詳解

    React冒泡和阻止冒泡的應(yīng)用詳解

    這篇文章主要介紹了React冒泡和阻止冒泡的應(yīng)用詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • react-redux中connect()方法詳細解析

    react-redux中connect()方法詳細解析

    connect()是React-redux中的核心方法之一,它將react組件預(yù)redux中的Store真正連接在一起,下面這篇文章主要給大家介紹了react-redux中connect()方法的相關(guān)資料,文中介紹的非常詳細,對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • React native ListView 增加頂部下拉刷新和底下點擊刷新示例

    React native ListView 增加頂部下拉刷新和底下點擊刷新示例

    這篇文章主要介紹了React native ListView 增加頂部下拉刷新和底下點擊刷新示例,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04
  • React-Native中禁用Navigator手勢返回的示例代碼

    React-Native中禁用Navigator手勢返回的示例代碼

    本篇文章主要介紹了React-Native中禁用Navigator手勢返回的示例代碼,具有一定的參考價值,有興趣的可以了解一下
    2017-09-09
  • react項目引入antd框架方式以及遇到的一些坑

    react項目引入antd框架方式以及遇到的一些坑

    這篇文章主要介紹了react項目引入antd框架方式以及遇到的一些坑,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-03-03
  • 再次談?wù)揜eact.js實現(xiàn)原生js拖拽效果引起的一系列問題

    再次談?wù)揜eact.js實現(xiàn)原生js拖拽效果引起的一系列問題

    React 起源于 Facebook 的內(nèi)部項目,因為該公司對市場上所有 JavaScript MVC 框架,都不滿意,就決定自己寫一套,用來架設(shè) Instagram 的網(wǎng)站.本文給大家介紹React.js實現(xiàn)原生js拖拽效果,需要的朋友一起學(xué)習(xí)吧
    2016-04-04
  • 基于React.js實現(xiàn)原生js拖拽效果引發(fā)的思考

    基于React.js實現(xiàn)原生js拖拽效果引發(fā)的思考

    這篇文章主要為大家詳細介紹了基于React.js實現(xiàn)原生js拖拽效果,繼而引發(fā)的一系列思考,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-03-03

最新評論