DIYGW可视化快速生成高质量vue3静态h5页面

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>

DIYGW可视化快速生成高质量vue3静态h5页面

LK

引用和评论

玩转DIY可视化打造UniApp小程序

Vue.js-Vue实例

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！

原生electron起步-从零到一完成构建和打包