坑坑坑,vant通过 CDN 引入时不会自动注册组件

cdn引入vant时,import Botton from "vant"方式引入会报如下错误:

Cannot use import statement outside a module

因为通过 CDN 引入时不会自动注册组件,可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
Vue.use(vant.Button);
Vue.use(vant.TreeSelect);
Vue.use(vant.List);

到这里就搞定了,下面是废话

Vue结合vant

vant官网 https://vant-contrib.gitee.io/vant/#/zh-CN/

vue官网 https://v3.vuejs.org/guide/installation.html#vue-devtools

cdn引入

<script src="https://unpkg.com/vue@next"></script>  //Vue最新版
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
//vant
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.8/lib/index.css"/>
<script src="https://cdn.jsdelivr.net/npm/vant@2.8/lib/vant.min.js"></script>


<div id="app"></div>


<script>
// 通过 CDN 引入时不会自动注册组件
// 可以通过下面的方式手动注册
Vue.use(vant.Lazyload);
Vue.use(vant.Button);
Vue.use(vant.TreeSelect);
Vue.use(vant.List);

var app = new Vue({
            el: '#app',
            data: {
                
            },
            created:function(){
                
            },
            methods: {
                
              
            },
        })
  </script>
上一篇:vant组件插槽失效


下一篇:学长认证模块产品官方原型图讲解:功能不复杂,但细节很多