APP--通过下载CDN引用vant移动端组件库

2020年5月12日环境配置等信息：使用的是apicloud创建的app项目开发工具使用的是VScode（因为我感觉VScode比apicloud-studio-2好用）vant组件库，使用版本2.8https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/homevue2.6.5直接CDN引用官网地址https://youzan.github.i

我血条子呢

7424人浏览 · 2020-05-12 11:25:02

我血条子呢 · 2020-05-12 11:25:02 发布

2020年5月12日

环境配置等信息：

使用的是apicloud创建的app项目
开发工具使用的是VScode（因为我感觉VScode比apicloud-studio-2好用）
vant组件库，使用版本2.8https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/home
vue2.6.5

直接CDN引用

官网地址https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/quickstart#fang-shi-si.-tong-guo-cdn-yin-ru
=>快速上手=>引用组件=>引用组件四
（下面引用根据官网方法修改）

<!-- 引入样式文件 -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"
/>

<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>

<script>
  new Vue({
    el: '#app',
  });

  // 调用函数组件，弹出一个 Toast
  vant.Toast('提示');
</script>

下载CDN引用

1.根据上述的引用，可找到`.js`和`.css`文件地址，通过地址直接打开，如：

在这里插入图片描述

2.本地新建`vant.min.css`和`vant.min.js`文件

3.将打开的内容直接复制进去

4.本地引用这两个文件

在这里插入图片描述

注意：

1.一定要引用了vue，这个是在vue的基础上使用的，不引用会报错，
2.如果是CDN引用，不需要注册组件（本来也就不是vue页面）

5.使用

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^