【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>


五、展示样式

目录
相关文章
|
1月前
|
监控 前端开发 测试技术
如何实现前端工程化的持续集成和持续部署?
通过以上步骤,可以建立一套完整的前端工程化 CI/CD 流程,实现前端代码从开发、测试、构建到部署的全自动化,提高开发效率、保证代码质量,快速响应用户需求和市场变化。
|
1月前
|
前端开发 JavaScript 测试技术
前端测试技术中,如何提高集成测试的效率?
前端测试技术中,如何提高集成测试的效率?
|
4月前
|
前端开发 JavaScript Serverless
中后台前端开发问题之通过低代码实现前后端交互如何解决
中后台前端开发问题之通过低代码实现前后端交互如何解决
47 0
|
2月前
|
JavaScript 前端开发 网络架构
|
4月前
|
缓存 前端开发 JavaScript
微前端集成优化:让所有子应用体积更小,加载更快!
【8月更文挑战第17天】微前端集成优化:让所有子应用体积更小,加载更快!
93 1
微前端集成优化:让所有子应用体积更小,加载更快!
|
3月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
65 3
|
4月前
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
113 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
4月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(上)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
60 10
|
4月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(下)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
74 9
|
4月前
|
人工智能 Java API
JeecgBoot 低代码平台快速集成 Spring AI
Spring 通过 Spring AI 项目正式启用了 AI(人工智能)生成提示功能。本文将带你了解如何在 Jeecg Boot 应用中集成生成式 AI,以及 Spring AI 如何与模型互动,包含 RAG 功能。
141 3

热门文章

最新文章

下一篇
DataWorks