在vue2项目中如何使用vant组件库

分享在vue2项目中如何使用vant组件库

1.在vue2项目中通过npm的下载安装vant2组件

npm i vant@latest-v2 -s//普通npm
cnpm i vant@latest-v2 -S//淘宝镜像

• 如果npm无法下载成功,就使用淘宝镜像下载安装即可

vant1.png

• 当package.json文件中有vant的版本,即是vant组件安装成功,没有则是没有安装成功

vant2.png

2.引入组件

• 引入组件有很多种方法,推荐使用自动按需引入
• 自动引入组件,则需要安装babel-plugin-import插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -d
cnpm i babel-plugin-import -D//淘宝镜像

vant3.png

• 安装成功后,在babel.config.js文件中写入以下代码进行配置

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

vant5.png

• 即可按需自动引入

vant4.png

• 在main.js文件中引入vant.js文件

vant6.png

• 最后就可以直接根据项目需要查看vant2官方文档进行使用

vant7.png