纵有疾风起
人生不言弃

vant通过 CDN 引入实例

vant通过 CDN 引入实例插图

<!DOCTYPE html>

<html lang=”zh”>

<head>

<meta charset=”UTF-8″ />

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />

<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />

<title>Document</title>

<!– 引入样式 –>

<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/vant@2.1/lib/index.css”>

<!– 引入组件 –>

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js”></script>

<script src=”https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js”></script>

</head>

<body>

<div id=”app”>

<van-button type=”default”>默认按钮</van-button>

<van-button type=”primary”>主要按钮</van-button>

<van-button type=”info”>信息按钮</van-button>

<van-button type=”warning”>警告按钮</van-button>

<van-button type=”danger”>危险按钮</van-button>

</div>

</body>

<script>

var app = new Vue({

el: ‘#app’,

data: {

},

methods: {

},

created() {

},

})

</script>

</html>

注意:首先注册组件,然后创建实例,否则报错;组件使用保持范围在实例容器里面生效。(cdn引入需要规范语法,闭合组件)

调用 Toast 提示时报错 Toast is not defined

vant通过 CDN 引入实例插图1

Toast.success(‘抄底成功’);

或者:this.$toast(‘提示)

文章转载于:https://www.jianshu.com/p/e450b9d32659

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » vant通过 CDN 引入实例
分享到: 生成海报

评论 抢沙发

评论前必须登录!

立即登录