vant组件库

最新推荐文章于 2024-09-02 00:47:43 发布

Mr_Wangkk

最新推荐文章于 2024-09-02 00:47:43 发布

阅读量514

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/Mr_Wangkk/article/details/125810294

版权

本文详细介绍了如何在移动端项目中安装和使用 vant 组件库，包括通过 cnpm 安装 vant，以及两种导入组件的方式：全局导入和按需导入。对于按需导入，文章提到了需要配置 babel.config.js 文件，并展示了如何在 main.js 中引入特定组件。通过这个教程，开发者可以快速在 Vue 项目中应用 vant 组件。

摘要由CSDN通过智能技术生成

移动端组件库参考: https://www.jianshu.com/p/c3c671787d1d

1, 下载安装vant组件库
cnpm i vant@latest-v2 --save

2, 以下两种导入方式:
导入所有组件: 在main.js中添加如下代码即可
   import Vant from 'vant';
   import 'vant/lib/index.css';
   Vue.use(Vant);
   然后在组件中直接复制官方文档中的组件代码即可显示
   <van-icon name="chat-o" badge="9" color="#1989fa" size="40"/>
按需导入组件(推荐)
   首先安装插件 :   cnpm i babel-plugin-import --save
   在根目录的babel.config.js文件中添加plugins字段
   module.exports = {
       presets: [
               '@vue/cli-plugin-babel/preset'
       ],
       plugins: [
               ['import', {
                     libraryName: 'vant',
                     libraryDirectory: 'es',
                     style: true
               }, 'vant']
       ]
   }
   在mian.js中按需导入需要用到的组件
   import { Button, Icon } from 'vant';
   Vue.use(Button);
   Vue.use(Icon);
   最后, 在组件中直接复制官方文档中的组件代码即可显示
   <van-icon name="chat-o" badge="9" color="#1989fa" size="40"/>