html引入vant组件库

最新推荐文章于 2025-06-11 09:13:39 发布

=^_^=喵喵

最新推荐文章于 2025-06-11 09:13:39 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

文章标签： html vue.js

本文链接：https://blog.csdn.net/weixin_65635437/article/details/130811220

该文展示了如何在HTML中通过CDN引入VantUI库和Vue3框架，并注册Vant组件，包括手动注册Lazyload组件。文中提供了创建Vue应用的基本结构，并显示了Vant按钮组件的使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

head引入vant和vue

 <link href="Scripts/vant/index.css" rel="stylesheet" />
    <script src="Scripts/vue@3.js"></script>
    <script src="Scripts/vant/vant.min.js"></script>

script插入vue语句，注册

<script>
    var vue;
    loadData() ;
    function loadData() {
        var app = {
            data() {
                return {}
            },
            computed: {
                fields() {},
            },
            created() {},
            mounted() { },
        };

        vue = Vue.createApp(app);
        vue.use(vant);

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        vue.use(vant.Lazyload);
        vue.mount('#app');

    }
    
</script>

body中进行绑定id,vant组件代码演示

<body>
 <div id="app">
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
   <van-button type="danger">危险按钮</van-button>    
</div>
</body>

关注博主即可阅读全文