vue入门模板——只需一个html
背景：
新功能页面设计与布局、动态生成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://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的更多相关文章
- 【百度地图API】发布静态图API啦！只需一个网址，即可展示定制百度地图！
原文:[百度地图API]发布静态图API啦!只需一个网址,即可展示定制百度地图! 摘要: 百度地图静态图API!您无须执行任何“特殊”操作便可在网页上显示此图片. 不需要 JavaScript.我们只 ...
- 「MacOS」将网站转换为应用程序，只需一个Unite
unite mac有着非常强大的功能,能够轻松的将网站转换为macOS上的应用程序,除了现代化的网页浏览功能以外,Unite for Mac下载还包括特定于macOS的功能,通知,TouchBar支持 ...
- 论文神器Latex30分钟快速入门教程-只需9步向学神看齐
小E说:工欲善其事,必先利其器.立志做个安静的美学霸的你,学会Latex,一定能使你的论文写作事半功倍. 1.LaTeX软件的安装和使用 方法A(自助):在MikTeX的官网下载免费的MikTeX编译 ...
- 有趣的Javascript：只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图（有演示demo）
该demo支持IE5以上任意内核的浏览器 查看演示demo:支持IE5以上版本的浏览器Canvas绘图demo 补充:chats.js和echarts等图表库也可以使用本方法兼容IE6以上浏览器 1. ...
- c# 高效分页只需一个dll实例
第一.首先下载WebUIControl.dll http://pan.baidu.com/s/1gdkilDh 第二.添加引用 三.应用实例-前台代码 <%@ Register Assembly ...
- laravel 中路由的快速设置(只需一个控制器名就ok) 不用具体到方法
routes/web.php 设置路由 Route::group(['middleware' => ['\iqiyi\Http\Middleware\VerifyCsrfToken::class ...
- 微信生成二维码 只需一个网址即刻 还有jquery生成二维码
<div class="orderDetails-info"> <img src="http://qr.topscan.com/api.php?text ...
- centos 下安装pdo_pgsql 只需一个命令_______yum install php56w-pgsql
[root@localhost ~]# yum install php56w-pgsql Loaded plugins: fastestmirror, langpacks Repository pgd ...
- vue 使用font-awesome 只需两步
npm 安装font-awesome 以及需要的所有依赖 cnpm install less less-loader css-loader style-loader file-loader font- ...
随机推荐
- Spring Boot-intellij idea导入方式搭建SpringBoot
Spring Boot概念 从最根本上来讲,Spring Boot就是一些库的集合,它能够被任意项目的构建系统所使用.简便起见,该框架也提供了命令行界面,它可以用来运行和测试Boot应用.框架的发布版 ...
- Arcgis案例操作教程——去掉Z值和M值
Arcgis案例操作教程--去掉Z值和M值 商务合作,科技咨询,版权转让:向日葵,135-4855__4328,xiexiaokui#qq.com 处理前 处理后: 处理方法 商务合作,科技咨 ...
- 2-5 【ngFor指令 事件的处理和样式绑定】顶部导航支持选中状态
索引的获取 first和last是布尔类型的 奇数偶数 []方括号表示的是数据绑定 ()圆括号就是事件绑定 . 开始代码 我们要实现的功能是菜单点击后,就变色 这样我们就得到了索引. 新建一个clas ...
- wamp64显示黄色图标不能忍
哎,昨天硬盘合区了下,重新安装了wamp64,删库的时候忘记备份数据库,灾难啊,只能自己重新建库建表了,深刻的教训啊. 然后还启动后是黄色图标,不能忍啊,发现wamp64需要启动三个服务,mysql, ...
- [LeetCode] 259. 3Sum Smaller 三数之和较小值
Given an array of n integers nums and a target, find the number of index triplets i, j, k with 0 < ...
- java打包小记
1.一个类的 Hello.java class Hello{ public static void main(String[] agrs){ System.out.println("hell ...
- 【Android Studio】Android实现跳转功能
最近在玩Esp32,需要APP,顺带学了下这方面的东西. 主要实现功能: 从主 mainActivity 跳转到otherActivity. 新建一个hello工程,添加 otherActivit ...
- 通过 PECL 安装 PHP 扩展（以 CentOS7 中安装 swoole 为例）
原文地址:https://blog.csdn.net/kikajack/article/details/82495190 常用工具PECL 和 phpize官网文档 PHP 有大量的扩展可以使用,比如 ...
- vs2010+ARX2012向导添加mfc支持类出现Error in default.htm PopulateDialogIDs():
初步判断为ARX2012默认的编译器平台集是v90,如果你只安装了vs2010,没有安装vs2008sp1或者vs2008sp1的编译器,以及对应的Windows MFC SDK,就可能会出现这样的问 ...
- javascript添加到收藏夹写法
javascript添加到收藏夹写法 <pre>function addFavorite2() { var url = window.location; var title = docum ...