哈哈，说到移动端开发，咱们程序员谁没用过Vant啊？这个组件库简直就是救命稻草！不过Zui近有小伙伴问我：Vant3到底值不值得用？今天咱就来聊聊这事儿。

说实在的，我刚开始学Vue的时候也挺迷茫的。市面上UI组件库多的是为什么偏偏要选Vant呢？

第一个原因嘛，就是它专为移动端打造的！你懂的，那些PC端组件库放到手机上kan起来总是那么别扭。而Vant从一开始就定位在移动端，所有组件dou是针对手机屏幕优化的。

第二呢，阿里系出品啊！虽然不是淘宝那边Zuo的，但质量绝对有保障。我记得第一次kan到官网时就被震撼到了——文档写得那么详细清晰。

第三点Zui重要——社区活跃度高啊！遇到问题随便搜下基本douNeng找到解决方案。不像有些小众框架，你遇到问题只Neng自己摸索半天。

现在说说具体怎么用吧。 安装hen简单啦：

npm i vant@latest-v3
npm i unplugin-vue-components -D
npm i postcss-pxtorem -D
npm i amfe-flexible -D

kan起来hen多包对吧？但别害怕哈，我一个个给你解释清楚。

vant@latest-v3是Zui新版本的Vant 3.x系列。unplugin-vue-components呢，就是帮我们实现按需引入的神器！你懂得嘛——不用担心整个组件库体积太大了。

postcss-pxtorem和amfe-flexible这两个呢...那什么那个...咳咳实际上是为了解决移动端适配问题啦！把px单位转成rem单位什么的...

小贴士：记得在vite.config.ts中配置postcss哦！rootValue设成75这样才Neng正常适配~

说这么多理论没意思吧？来kankan实际项目中怎么用它geng有意思～比如电商APP开发时常见的一些场景：

⬆️注意哦！这里商品卡片和滑动删除dou直接从数据数组里循环渲染出来了～方便极了吧？！⬆️

// hooks文件夹→home.ts首页商品列表
import { RequestShopList } from '@/api/index'
export const useHomeList =  => {
  const list = ref
  const getProductList = async  => {
    const data = await RequestShopList
    list.value = data.resultInfo.list.map(item => ({
      id: item.id,
      product: item.product,
      // 其他字段映射...
    }))
  }
  return { list, getProductList }
}

<style scoped/>