vue项目中按需引入vant组件

vue项目使用vant组件库

vant组件库官网 https://youzan.github.io/vant/#/zh-CN/quickstart

通过 npm 安装

npm i vant -S 或者 cnpm i vant -S

安装插件

npm i babel-plugin-import -D

然后在.babelrc 中添加配置 样式按需加载

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

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

<template>
   <div>
      <van-button type='primary'>我的第一篇博客</van-button>
   </div>
</template>
<script>
import {Button} from 'vant'
export default {
  components:{
    vanButton: Button,
  }
}
</script>

最后运行时报错 则重新 npm install 或者把 node_modules 删掉重新 npm install

这是本人，第一次写博客，若存在错误希望指正，后续会继续更新vue移动端项目中使用vant其他组件。