背景：

新功能页面设计与布局、动态生成UI组件、拖拽模板生成页面，然后生成代码等等，目的都是减少开发成本或复用通用组件。

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>vue模板</title>

        <link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css" />

        <script src="//unpkg.com/vue/dist/vue.js"></script>

        <script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>

    </head>

    <body>

        <div id="app">

            <el-row>

                <el-button>默认按钮</el-button>

                <el-button type="primary">主要按钮</el-button>

                <el-button type="success">成功按钮</el-button>

                <el-button type="info">信息按钮</el-button>

                <el-button type="warning">警告按钮</el-button>

                <el-button type="danger">危险按钮</el-button>

            </el-row>

            <el-row>

                <el-button plain>朴素按钮</el-button>

                <el-button type="primary" plain>主要按钮</el-button>

                <el-button type="success" plain>成功按钮</el-button>

                <el-button type="info" plain>信息按钮</el-button>

                <el-button type="warning" plain>警告按钮</el-button>

                <el-button type="danger" plain>危险按钮</el-button>

            </el-row>

            <el-row>

                <el-button round>圆角按钮</el-button>

                <el-button type="primary" round>主要按钮</el-button>

                <el-button type="success" round>成功按钮</el-button>

                <el-button type="info" round>信息按钮</el-button>

                <el-button type="warning" round>警告按钮</el-button>

                <el-button type="danger" round>危险按钮</el-button>

            </el-row>

            <el-row>

                <el-button icon="el-icon-search" circle></el-button>

                <el-button type="primary" icon="el-icon-edit" circle></el-button>

                <el-button type="success" icon="el-icon-check" circle></el-button>

                <el-button type="info" icon="el-icon-message" circle></el-button>

                <el-button type="warning" icon="el-icon-star-off" circle></el-button>

                <el-button type="danger" icon="el-icon-delete" circle></el-button>

            </el-row>

        </div>

        <script type="text/javascript">

            new Vue().$mount('#app')

            // new Vue({ // 扩展

            //   el: '#app',

            //   router,

            //   store,

            //   template: '<App/>',

            //   components: { App },

            //   render: h => h(App)

            // });

        </script>

    </body>

</html>

通过json生成组件，在gitHub查询了很多插件：

 目的：生成json数据（数据类型和值、UI组件类型与校验、2者的结合）

参考项目：

https://json-schema.org/

https://github.com/jsonform/jsonform

https://github.com/jdorn/json-editor

https://github.com/yourtion/vue-json-ui-editor （json数据过于简单只存数据，语义化不好）

https://github.com/YMFE/json-schema-editor-visual （通过UI组件生成json格式的数据，antd）

针对elment组件：

https://github.com/GavinZhuLei/vue-form-making/blob/master/README.zh-CN.md

https://github.com/formschema/elementui

https://github.com/codetrial/element-form-builder/blob/develop/.github/preview.gif

https://github.com/xaboy/form-create

针对antd组件：

https://github.com/NgeKaworu/antd-form-gen

其他：

https://github.com/rjsf-team/react-jsonschema-form

https://github.com/json-schema-form/angular-schema-form

【demo】:

https://codepen.io/share-web/pen/ZEYyqzX?editors=0010

前端开发在线拖拽生成页面：

http://lowcode.magicalcoder.com/magicaldrag/index-page.html

其他汇总： https://www.cnblogs.com/camille666/p/drag_blockcomponent_generatepages.html

-end-

vue入门模板——只需一个html的更多相关文章

  1. 【百度地图API】发布静态图API啦！只需一个网址，即可展示定制百度地图！

    原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任何“特殊”操作便可在网页上显示此图片. 不需要 JavaScript.我们只 ...

  2. 「MacOS」将网站转换为应用程序，只需一个Unite

    unite mac有着非常强大的功能,能够轻松的将网站转换为macOS上的应用程序,除了现代化的网页浏览功能以外,Unite for Mac下载还包括特定于macOS的功能,通知,TouchBar支持 ...

  3. 论文神器Latex30分钟快速入门教程-只需9步向学神看齐

    小E说:工欲善其事,必先利其器.立志做个安静的美学霸的你,学会Latex,一定能使你的论文写作事半功倍. 1.LaTeX软件的安装和使用 方法A(自助):在MikTeX的官网下载免费的MikTeX编译 ...

  4. 有趣的Javascript：只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图（有演示demo）

    该demo支持IE5以上任意内核的浏览器 查看演示demo:支持IE5以上版本的浏览器Canvas绘图demo 补充:chats.js和echarts等图表库也可以使用本方法兼容IE6以上浏览器 1. ...

  5. c# 高效分页只需一个dll实例

    第一.首先下载WebUIControl.dll http://pan.baidu.com/s/1gdkilDh 第二.添加引用 三.应用实例-前台代码 <%@ Register Assembly ...

  6. laravel 中路由的快速设置(只需一个控制器名就ok) 不用具体到方法

    routes/web.php 设置路由 Route::group(['middleware' => ['\iqiyi\Http\Middleware\VerifyCsrfToken::class ...

  7. 微信生成二维码 只需一个网址即刻 还有jquery生成二维码

    <div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...

  8. centos 下安装pdo_pgsql 只需一个命令_______yum install php56w-pgsql

    [root@localhost ~]# yum install php56w-pgsql Loaded plugins: fastestmirror, langpacks Repository pgd ...

  9. vue 使用font-awesome 只需两步

    npm 安装font-awesome 以及需要的所有依赖 cnpm install less less-loader css-loader style-loader file-loader font- ...

随机推荐

  1. 003 Vue动画

    一: 0.说明 在进入/离开的过渡中,会有 6 个 class 切换. v-enter:定义进入过渡的开始状态.在元素被插入之前生效,在元素被插入之后的下一帧移除. v-enter-active:定义 ...

  2. 不规则形状的Ifc构件顶点坐标获取

    不规则形状的Ifc构件顶点坐标获取 今天有人问我,ifc构件的顶点坐标怎么获取,自己前年的时候写过类似的程序,但有点记不清了,最近一直用C++解析ifc,慎重起见,还是重新再写一次,java版本的获取 ...

  3. Spring cloud微服务安全实战-7-2docker快速入门

    因为后面运行的这些可视化的工具都是用docker去run 的.为了避免对docker完全没有概念的同学听不懂,帮助大家从概念上去理解docker是个什么东西. 最核心的东西就是镜像,把它理解为Spri ...

  4. 【Flume学习之一】Flume简介

    环境 apache-flume-1.6.0 Flume是分布式日志收集系统.可以将应用产生的数据存储到任何集中存储器中,比如HDFS,HBase:同类工具:Facebook Scribe,Apache ...

  5. vs中调试程序查看变量在内存中的内容的方法

    vs中调试程序 查看变量在内存中的内容的方法 https://blog.csdn.net/guojg1988/article/details/42922149 原文链接:http://www.sows ...

  6. ProtoStuff无法反序列化Deprecated注解成员问题记录

    在开发过程中,遇到一个鬼畜的问题,在DO的某个成员上添加@Deprecated注解之后,通过ProtoStuff反序列化得到的DO中,这个成员一直为null:花了不少时间才定位这个问题,特此记录一下 ...

  7. leetcode 55 Jump Game 三种方法，回溯、动态规划、贪心

    Given an array of non-negative integers, you are initially positioned at the first index of the arra ...

  8. vue中指令绑定的v-if逻辑结构

    <!-- if判断 --> <div id="app2"> <p v-if="seen"> <!-- 给p标签绑定指令 ...

  9. Python3基础语法（20190617）

    字符串 字符串是以单引号'或双引号"括起来的任意文本,比如'abc',"xyz"等等.请注意,''或""本身只是一种表示方式,不是字符串的一部分,因此 ...

  10. Luogu4240 毒瘤之神的考验 莫比乌斯反演、根号分治

    传送门 首先有\(\varphi(ij) = \frac{\varphi(i) \varphi(j) \gcd(i,j)}{\varphi(\gcd(i,j))}\),把欧拉函数的定义式代入即可证明 ...