vue按需引入vant组件

原创已于 2022-03-02 16:04:36 修改 · 1.0k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-03-02 16:00:52 首次发布

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何通过npm安装Vant组件库，并演示了如何在Vue项目中按需引入Overlay组件，包括配置babel插件和在模板、script和style中使用。适合前端开发者快速上手移动端UI设计。

vant组件库官网:Vant 3 - Mobile UI Components built on Vue

vant安装: npm i vant -s

按需引入插件安装: npm i babel-plugin-import -D

在.babelrec文件中添加按需引入配置

{
   "plugins":[
        ["import",{
            "libraryName":"vant",
            "libraryDirectory":"es",
            "style":true
        }]
    ]
}

在组件中就可以按需引入啦

<template>
    <div>
        <Overlay></Overlay>
    </div>
</template>
<script>
    import {Overlay} from "vant"
    export default{
        components:{
            Overlay:Overlay,
        }
    }
</script>
<style>

</style>