分享在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
