传统html中使用vant @令狐张豪

这里说的是传统html哈、传统html,不是vue脚手架,最近接手了一个项目,是前后端不分离的,前端是用html写的vue,没使用脚手架,这时候我们想使用vue的一些UI组件库

开始很踩了很多坑,网上也百度了很多,但标题写的是传统html使用vant,进去一看结果还是脚手架,心里顿时一万个草泥马,最后自己琢磨出来了,拿出来分享给大家!

大家多看下注释,感觉注释写的很详细了~

  • 通过cdn的方式引入vant_css文件和js文件,当然还有我们的vue_js文件
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //引入vant css样式文件
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.css" />
    //引入vue js文件
    <script src=" https://cdn.jsdelivr.net/npm/[email protected] "></script>
    //引入vant js文件
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/vant.min.js"></script>
</head>

<body>
    <div id="app">
        {{text}}
        <!-- 下面是vant的两个icon组件,我们直接复制粘贴过来就能使用 -->
        <!-- 但我们想要使用vant功能性的组件,比如轻提示啊之类的,大家可以看下mounted里面写的 -->
        <van-icon name="chat-o" badge="99+" />
        <van-loading v-if="isLoading" type="spinner" />
    </div>
    <script type="module" src="./js/index.js">
		let app = new Vue({
    el: "#app",
    data() {
        return {
            text: '哈哈哈',
        }
    },

    mounted() {
        //如果你是用脚手架搭建的,我们想使用Toast之类的得先Vue.use(吧啦吧啦你要用的东西)
        /*
		* 传统html使用我们不需要再去use
		* 举个例子我们想使用Toast
		* 我们直接写 vant.Toast.success('成功')
		* 要主要的是要加vant.xxxx
		*/
    },

})
	</script>
    <script src="../api/index.js"></script>
    <script src="../api/request.js"></script>
</body>

</html>

传统html要想使用一些vue的UI组件库可能文档上说的不是很详细,其他的感觉都类似吧,像一些axios、element ui


end~~~

如有错误或观点不一致的请评论留言共同讨论,本人前端小白一枚,根据自己实际项目遇到的问题进行总结分享,谢谢大家的阅读!
文章对您有所帮助请给作者点个赞支持下,谢谢~

你可能感兴趣的:(css,html,vant,vue,UI组件库,移动端)