AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程

简介: AMIS【部署 01】amis前端低代码框架可视化编辑器amis-editor本地部署流程


官网仅贴出了本地运行这个项目的步骤:

# 1.安装依赖
npm i
# 2.等编译完成后本地打开页面看效果
npm run dev

我是后端开发工程师,对这类项目的打包部署并不是很了解,特此记录。

1.amis-editor是什么

1.1 amis是什么

amis 是一个低代码前端框架,它使用 JSON 配置来生成页面,可以减少页面开发工作量,极大提升效率。

使用JSON编写页面有以下好处:

  1. 无需前端知识: 对于不了解前端或JavaScript的用户,使用JSON配置的方式可以生成专业且复杂的后台界面,这是其他前端UI库无法轻松实现的。
  2. 不受前端技术更新的影响: amis基于JSON配置,使得页面不受前端技术的快速更新影响。百度内部存在六年前创建的amis页面仍在使用,而当时的Angular/Vue/React版本已经被废弃。
  3. 持续升级: amis不断提升用户体验,例如表格首行冻结和下拉框大数据处理。JSON配置无需修改,使得页面保持最新功能而不增加维护成本。
  4. 可视化页面编辑器: amis提供可视化页面编辑器,允许完全使用可视化界面来制作页面,而不仅仅是静态原型。

amis的其他亮点:

  1. 完整的界面解决方案: amis通过JSON配置可以完成完整功能开发,包括数据获取、表单提交、验证等,无需二次开发即可直接上线。
  2. 大量内置组件: amis内置120+组件,解决了一站式开发的问题,不需要依赖第三方组件库,确保展现和交互一致性。
  3. 支持扩展: 除了低代码模式,还支持通过自定义组件进行扩展,可以实现90%低代码和10%代码开发的混合模式,提高效率和灵活性。
  4. 容器支持无限级嵌套: 可以通过嵌套来满足各种布局和展现需求。
  5. 经过实战验证: 在百度内部广泛使用,经过6年多时间创建了5万多个页面,涵盖了各种需求,从内容审核到机器管理,证明了amis的实用性。

amis不适合的情况:

  1. 大量定制UI: amis更适合用于有大量常见UI组件的页面,对于追求个性化视觉效果的面向普通客户(toC)的页面,不太适用。
  2. 极为复杂或特殊的交互:
  • 复杂的前端功能: 涉及大量定制拖拽操作等依赖原生DOM的功能无法使用amis。
  • 特殊交互: 对于某些特殊的交互,如可视化编辑器中的定制拖拽操作,amis可能无法提供解决方案,但后续版本可能会增加专门的组件支持。

1.2 amis-editor是什么

amis-editor 是 amis 的可视化编辑器,它能让开发者快速搭建后台页面,只需要通过拖拽组件等就可以生成对应的 JSON 代码。

2.amis-editor本地部署

可视化编辑器官网介绍:https://aisuda.bce.baidu.com/amis/zh-CN/docs/extend/editor

2.1 准备阶段

  • nodejs环境
C:\Users\Administrator>node -v
v16.14.0

2.2 源码修改

修改amis.config.js的build脚本配置信息,如下:

build: {
  entry: { 
    index: './src/index.tsx',
      },
  NODE_ENV: 'production',
    // 1.【可以进行修改】打包后的文件绝对路径(物理路径)
    assetsRoot: resolve('./demo-5.6.2'), 
    // 2.【必须进行修改】设置静态资源的引用路径
    assetsPublicPath: './', 
    assetsSubDirectory: '', 
    productionSourceMap: false,
    productionGzip: false,
    productionGzipExtensions: ['js', 'css', 'json'],
    plugins: [new MonacoWebpackPlugin()],
    bundleAnalyzerReport: false,
}

2.3 构建项目

  1. 安装依赖
npm i
  1. 使用 npm 脚本进行项目构建:

构建成功后,会生成demo-5.6.2目录:

将打包后的文件复制到nginx的html目录的自建文件夹下,我的是dist文件夹。

2.4 nginx配置

server {
    listen 80;
    # 替换成你的域名或服务器IP
    server_name your_domain.com; 
    # 核心配置
    location / {
        root /path/to/your/html/dirPath;
        #【比如我的windows环境】 root D:\\app\\nginx-1.18.0\\html\\dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    # 可根据需要配置其他规则,比如代理到后端服务等
}

2.5 启动nginx

在浏览器里输入your_domain.com即可:

编辑初始页面,可看的系统的默认组件:

3.总结

整个流程还是很简单的,由于index.html里有部分图标还是https地址可能现实不正常,但是不影响使用。

目录
相关文章
|
10天前
|
前端开发 JavaScript 搜索推荐
CSS框架是前端开发中不可或缺的工具
【4月更文挑战第12天】CSS框架是前端开发中不可或缺的工具
17 2
|
20天前
|
前端开发 应用服务中间件 nginx
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目
83 0
|
1月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
35 0
|
1月前
|
资源调度 前端开发 JavaScript
推荐一款可以自动创建视频的前端Ract框架
推荐一款可以自动创建视频的前端Ract框架
|
1月前
|
数据可视化 Linux API
如何在Linux使用docker部署Swagger Editor并实现无公网IP远程协同编辑API文档
如何在Linux使用docker部署Swagger Editor并实现无公网IP远程协同编辑API文档
|
1月前
|
开发框架 前端开发 JavaScript
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
84 1
推荐5款热门的Web前端开发框架,助你快速构建优秀网站
|
1月前
|
前端开发 JavaScript 应用服务中间件
部署前端项目到服务器过程详解
部署前端项目到服务器过程详解
92 0
|
1月前
|
数据可视化 前端开发
web前端-Echarts-5.3高级可视化和图表组合布局
web前端-Echarts-5.3高级可视化和图表组合布局
|
1月前
|
开发框架 前端开发 JavaScript
未来趋势:前端开发框架的革新与发展
随着技术的不断进步和市场需求的变化,前端开发框架也在不断革新和发展。本文将探讨当前前端开发框架的最新趋势,并展望未来可能的发展方向。
|
1月前
|
开发框架 移动开发 JavaScript
探索前端开发框架:React、Angular 和 Vue 的对决(四)
探索前端开发框架:React、Angular 和 Vue 的对决(四)