DIYGW可视化快速生成VUE3静态html页面_vue界面转为静态html-优快云博客

本文链接：https://blog.youkuaiyun.com/luck332/article/details/124323350

DIYGW可视化支持导出静态html页面。DIY可视化在原有支持导出uniapp、微信小程序、支付宝小程序、百度小程序、QQ小程序、Finclip小程序等基础上，增加导出静态html页面，导出静态html页面免打包，能快速集成到传统的静态html访问的页面系统。

导出静态页面使用了有赞vant移动端类库，大家在传统的项目中，仍然会用引进vue.js vant.js加到我们的html页面里，然后html页面加上自己的实现.

特性
多个高质量组件，覆盖移动端主流场景
使用vue3+vant+js编写
集成了丰富的点击事件、比较页面跳转、地图导航、提示信息、弹窗提示、自定义方法
集成了API快速集成开发，生成API接口代码，快速API在线可视化绑定变量、支持在线绑定生成For循环、IF判断等
所见即所得的生成html页面代码、快速可视化页面导出源码
快速集成到现有采用传统html页面开发的系统，比如第三方微擎开发微信公众号移动端页面等等

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>首页</title>
		<link rel="stylesheet" href="common/vant.min.css" />
		<script src="common/vue.js"></script>
		<script src="common/vant.min.js"></script>
		<script src="common/axios.min.js"></script>
		<script src="common/Session.js"></script>
		<script src="common/Tools.js"></script>
		<script src="common/Validate.js"></script>
		<script src="common/Page.js"></script>
		<script src="common/HttpService.js"></script>
		<meta name="author" content="DIY官网 http://www.diygw.com" />
		<link rel="stylesheet" href="common/diygw-ui/index.css" />
	</head>
	<body>
		<div id="app">
			<div class="container">
				<div class="diygw-col-24">内容</div>
				<img src="./static/pic1.jpg" class="response diygw-col-24" mode="widthFix" />
				<div class="flex diygw-col-24">
					<div class="diygw-avatar radius bg-none">
						<img mode="aspectFit" class="diygw-avatar-img radius" src="./static/grid1.png" />
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</body>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {};
			},
			created() {
				this.init();
			},
			methods: {
				async init() {}
			}
		});
		app.use(vant);
		app.use(vant);
		app.config.globalProperties.$tools = new Tools();
		app.config.globalProperties.$http = httpService;
		app.config.globalProperties.$session = Session;
		app.mixin({
			methods: {
				Validate,
				setData,
				navigateTo,
				showModal,
				showToast,
				uploadImage
			}
		});
		app.mount('#app');
	</script>
	<style>
		.container {
			padding-bottom: 80px;
		}
	</style>
</html>