【amis低代码前端框架】vue2集成百度低代码前端框架amis

简介: 【amis低代码前端框架】vue2集成百度低代码前端框架amis

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


第一步:下载amis

命令行内执行以下命令下载安装amis

npm i amis


第二步:下载完毕amis后 将node_modules中的amis包复制到public内


第三步:在public/index.html内引入amis包

  <!--amis-->
  <link rel="stylesheet" href="./lib/amis/sdk/sdk.css">
  <link rel="stylesheet" href="./lib/amis/sdk/helper.css">
  <link rel="stylesheet" href="./lib/amis/sdk/iconfont.css">
  <link rel="stylesheet" href="./lib/amis/lib/themes/cxd.css">
  <script src="./lib/amis/sdk/sdk.js"></script>

ps:cxd.css属于基础样式文件,如果是新项目正常引入cxd,我这是老项目内集成amis所以将cxd包注释了


四、新建一个vue模板使用amis

<template>
  <div ref="box" style="text-align: center; font-size: 24px; font-weight: 700; margin-bottom: 20px">
    基本信息
  </div>
</template>
<script>
export default {
  mounted() {
    const amis = amisRequire('amis/embed')
    const amisScoped = amis.embed(this.$refs.box, {
      type: 'page',
      title: 'G佳伟实操-表单页面',
      body: {
        type: 'form',
        mode: 'horizontal',
        api: '/saveForm',
        body: [
          {
            label: 'Name',
            type: 'input-text',
            name: 'name'
          },
          {
            label: 'Email',
            type: 'input-email',
            name: 'email'
          }
        ]
      }
    })
  }
}
</script>


五、展示样式

目录
相关文章
|
12月前
|
监控 前端开发 测试技术
如何实现前端工程化的持续集成和持续部署?
通过以上步骤,可以建立一套完整的前端工程化 CI/CD 流程,实现前端代码从开发、测试、构建到部署的全自动化,提高开发效率、保证代码质量,快速响应用户需求和市场变化。
|
3月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
690 0
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
503 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
12月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
缓存 前端开发 JavaScript
微前端集成优化:让所有子应用体积更小,加载更快!
【8月更文挑战第17天】微前端集成优化:让所有子应用体积更小,加载更快!
357 1
微前端集成优化:让所有子应用体积更小,加载更快!
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
397 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
408 3
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
733 1
|
人工智能 Java API
JeecgBoot 低代码平台快速集成 Spring AI
Spring 通过 Spring AI 项目正式启用了 AI(人工智能)生成提示功能。本文将带你了解如何在 Jeecg Boot 应用中集成生成式 AI,以及 Spring AI 如何与模型互动,包含 RAG 功能。
461 3
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
203 0