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

2020年5月12日

环境配置等信息：

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