不会前端编程也能做网页一款强大的低代码可视化 H5 搭建平台
这次介绍的这款开源项目很适合当前网风下，只想鼠标点点点，就完成很多事情（包括开发）的现实。这款开源的产品叫作“H5-Dooring”。
项目的官网是：https://github.com/MrXujiang/h5-Dooring
关于该产品的介绍，项目的readme是这样描述的：
H5-Dooring是一款功能强大，专业可靠的H5可视化页面配置解决方案，致力于提供一套简单方便、专业可靠、无限可能的H5落地页最佳实践。技术栈以react和typescript为主， 后台采用nodejs开发, 正在探索h5-lowcode解决方案。
下面是我自己的部署步骤，使用的系统是ubuntu24.04
一、安装nodejs和npm
这些服务虽然在线仓库中都有，但是版本都比较旧，已经无法使用过程的npm仓库源了。采用官方的nvm办法进行安装，并指定到20的长期支持版。
先安装nvm这个nodejs的管理工具。
demouser@demohosts:~$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 16555 100 16555 0 0 28262 0 --:--:-- --:--:-- --:--:-- 28250
=> Downloading nvm from git to '/home/demouser/.nvm'
=> 正克隆到 '/home/demouser/.nvm'...
remote: Enumerating objects: 378, done.
remote: Counting objects: 100% (378/378), done.
remote: Compressing objects: 100% (326/326), done.
remote: Total 378 (delta 43), reused 163 (delta 25), pack-reused 0 (from 0)
接收对象中: 100% (378/378), 375.87 KiB | 1.74 MiB/s, 完成.
处理 delta 中: 100% (43/43), 完成.
* （头指针在 FETCH_HEAD 分离）
master
=> Compressing and cleaning up git repository
=> Appending nvm source string to /home/demouser/.bashrc
=> Appending bash_completion source string to /home/demouser/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion" # This loads nvm bash_completion安装完成后，如果提示没有nvm命令，就重启一下服务器。
使用下面的命令进行安装：
demouser@demohosts:~$ nvm install 20
Downloading and installing node v20.18.0...
Downloading https://nodejs.org/dist/v20.18.0/node-v20.18.0-linux-x64.tar.xz...
######################################################################### 100.0%
Computing checksum with sha256sum
Checksums matched!
Now using node v20.18.0 (npm v10.8.2)
Creating default alias: default -> 20 (-> v20.18.0)
demouser@demohosts:~$ node -v
v20.18.0
demouser@demohosts:~$ npm -v
10.8.2设置国内的npm镜像源
demouser@demohosts:~$ npm config set registry https://registry.npmmirror.com使用npm安装yarn
demouser@demohosts:~$ npm install -g yarn
added 1 package in 2s二、拉取项目代码
进入创建一个目录并进入该目录，咱们拉取的代码将放在这个目录里面
demouser@demohosts:~$ sudo mkdir /web
demouser@demohosts:~$ sudo chmod -R 777 /web
demouser@demohosts:~$ cd /web从github上把本项目的代码拉取到本地
demouser@demohosts:/web$ git clone https://github.com/MrXujiang/h5-Dooring.git
正克隆到 'h5-Dooring'...
remote: Enumerating objects: 5833, done.
remote: Counting objects: 100% (336/336), done.
remote: Compressing objects: 100% (270/270), done.
remote: Total 5833 (delta 69), reused 294 (delta 59), pack-reused 5497 (from 1)
接收对象中: 100% (5833/5833), 50.92 MiB | 15.92 MiB/s, 完成.
处理 delta 中: 100% (3231/3231), 完成.查看是否已经下载完成，下载完成的内容会如下：
demouser@demohosts:/web$ ls
h5-Dooring
demouser@demohosts:/web$ cd h5-Dooring/
demouser@demohosts:/web/h5-Dooring$ ls
CHANGELOG.md doc LICENSE package.json public SECURITY.md src webpack.config.js yarn.lock
code.png Dockerfile logo.ff7fc6bb.png package-lock.json readme.md server.js tsconfig.json website zh.md
demouser@demohosts:/web/h5-Dooring$ 三、安装并运行项目
进入到项目的目录中，执行下面的命令安装依赖关系
demouser@demohosts:/web$ cd h5-Dooring/
demouser@demohosts:/web/h5-Dooring$ yarn install
yarn install v1.22.22
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning @visactor/vchart > @visactor/vdataset > geobuf > shapefile > text-encoding@0.6.4: no longer maintained
[2/4] Fetching packages...
warning url-loader@1.1.2: Invalid bin field for "url-loader".
[3/4] Linking dependencies...
warning "@umijs/plugin-esbuild > esbuild-webpack-plugin@1.0.5" has unmet peer dependency "webpack@^4.0.0".
warning "@umijs/plugin-sass > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning "@umijs/preset-react > @umijs/plugin-layout@0.12.2" has unmet peer dependency "@ant-design/pro-layout@^5.0.0".
warning "@umijs/preset-react > @umijs/plugin-dva > babel-plugin-dva-hmr@0.4.2" has unmet peer dependency "redbox-react@1.x".
warning "@umijs/preset-react > @umijs/plugin-dva > dva-loading@3.0.21" has unmet peer dependency "dva-core@^1.1.0 | ^1.5.0-0 | ^1.6.0-0".
warning "@umijs/preset-react > @umijs/plugin-dva > dva > connected-react-router@6.5.2" has unmet peer dependency "react-router@^4.3.1 || ^5.0.0".
warning " > antd-img-crop@3.12.0" has unmet peer dependency "prop-types@^15.6.2".
warning "zarm > create-react-context@0.2.3" has unmet peer dependency "prop-types@^15.0.0".
warning " > eslint-config-react-app@5.2.1" has incorrect peer dependency "@typescript-eslint/eslint-plugin@2.x".
warning " > eslint-config-react-app@5.2.1" has incorrect peer dependency "@typescript-eslint/parser@2.x".
warning " > sass-loader@9.0.3" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
$ umi generate tmp
Done in 176.19s.启动项目
demouser@demohosts:/web/h5-Dooring$ yarn start
yarn run v1.22.22
$ export NODE_OPTIONS=--openssl-legacy-provider && umi dev -- editor
Starting the development server...
Webpack
Compiled successfully in 1.66m
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db
Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
[BABEL] Note: The code generator has deoptimised the styling of /web/h5-Dooring/node_modules/xlsx/xlsx.js as it exceeds the max of 500KB.
DONE Compiled successfully in 99625ms 19:54:42
App running at:
- Local: http://localhost:8000 (copied to clipboard)
- Network: http://192.168.10.144:8000四、测试项目
在远程浏览器中输入 http://服务器IP+8000端口，就可以访问到H5搭建平台了。