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


五、展示样式

目录
相关文章
|
2月前
|
前端开发 JavaScript Serverless
中后台前端开发问题之通过低代码实现前后端交互如何解决
中后台前端开发问题之通过低代码实现前后端交互如何解决
35 0
|
22天前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
36 3
|
2月前
|
缓存 前端开发 JavaScript
微前端集成优化:让所有子应用体积更小,加载更快!
【8月更文挑战第17天】微前端集成优化:让所有子应用体积更小,加载更快!
46 1
微前端集成优化:让所有子应用体积更小,加载更快!
|
2月前
|
前端开发 Java Maven
【前端学java】全网最详细的maven安装与IDEA集成教程!
【8月更文挑战第12天】全网最详细的maven安装与IDEA集成教程!
71 2
【前端学java】全网最详细的maven安装与IDEA集成教程!
|
2月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(上)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
42 10
|
2月前
|
前端开发 JavaScript 程序员
后端程序员的前端捷径-超级容易上手使用的前端框架layUI(下)
后端程序员的前端捷径-超级容易上手使用的前端框架layUI
65 9
|
2月前
|
JavaScript 前端开发 API
【前端开发】JS同步与异步调用,Vue2基础知识
本文简要介绍了JavaScript中的同步与异步调用以及Vue2的基础知识。 ### JS同步与异步调用 - **同步调用**:代码按顺序执行,每个任务完成后才执行下一个。 - **异步调用**:允许代码并发执行,不必等待前一个任务完成。 - **回调函数**:传统异步模式,如`setTimeout`。 - **Promise**:解决回调地狱问题,链式调用 `.then()`。 - **async/await**:基于Promise,使异步代码看起来像同步代码。 ### Vue2基础知识 - **核心概念**:指令、实例、组件、模板、数据绑定和生命周期钩子。 - **指令**
54 5
|
2月前
|
前端开发 Java UED
JSF遇上Material Design:一场视觉革命,如何让传统Java Web应用焕发新生?
【8月更文挑战第31天】在当前的Web开发领域,用户体验和界面美观性至关重要。Google推出的Material Design凭借其独特的动画、鲜艳的颜色和简洁的布局广受好评。将其应用于JavaServer Faces(JSF)项目,能显著提升应用的现代感和用户交互体验。本文介绍如何通过PrimeFaces等组件库在JSF应用中实现Material Design风格,包括添加依赖、使用组件及响应式布局等步骤,为用户提供美观且功能丰富的界面。
34 0
|
2月前
|
前端开发 Devops 持续交付
【前端自动化新高度】Angular与Azure DevOps完美结合:从零构建持续集成与持续部署的全自动流水线,提升开发效率与软件交付质量!
【8月更文挑战第31天】Angular作为领先的前端框架,以强大功能和灵活性深受开发者喜爱。Azure DevOps提供一站式DevOps服务,涵盖源码管理、持续集成(CI)及持续部署(CD)。本文将指导你如何在Azure DevOps中搭建Angular项目的CI/CD流程,并通过具体示例代码展示整个过程。首先,我们将创建一个Angular项目并初始化Git仓库;然后,在Azure DevOps中设置CI流水线,定义YAML文件以自动化构建和部署流程。最终实现每次提交代码后自动构建并部署至Azure Web App,极大提升了开发效率和软件交付速度,使团队更专注于创新。
19 0
|
2月前
|
前端开发 JavaScript API
Web服务器与前端技术的集成
【8月更文第28天】随着Web开发技术的发展,现代前端框架如React、Vue.js等已经成为构建复杂Web应用的标准工具。为了提供更好的用户体验,这些前端应用通常需要与后端Web服务器进行紧密集成。本文将详细介绍如何将React和Vue.js与后端Web服务器无缝集成,以创建高性能且用户友好的Web应用。
26 0
下一篇
无影云桌面