vant框架cdn使用方式的简短案例

最新推荐文章于 2026-02-21 03:06:31 发布

原创最新推荐文章于 2026-02-21 03:06:31 发布 · 8.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

学习

当前文章被收录于：

学习

115 篇文章 6 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何通过CDN方式快速引入Vant UI框架，实现Vue项目的组件使用，包括基本HTML结构、样式及脚本引入方法。

vant框架主页：https://youzan.github.io/vant/#/zh-CN/intro

cdn方式引用的简易例子：

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>test</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css">
</head>
<body>
  <div id="app">
    <van-cell-group>
       <van-cell title="单元格" value="内容"></van-cell>
        <van-cell title="单元格" value="内容" label="描述信息" ></van-cell>
    </van-cell-group>
  <van-button type="primary">主要按钮</van-button>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js"></script>
<script>
    new Vue({
      el: '#app'
    });
</script>
</body>
</html>