什么是Vant

• Vant是一个轻量，可靠的移动端组件库，2017开源

• 目前 Vant 官方提供了 [Vue 2 版本](https://vant-contrib.gitee.io/vant/v2)、[Vue 3 版本](https://vant-contrib.gitee.io/vant)和[微信小程序版本](http://vant-contrib.gitee.io/vant-weapp)，并由社区团队维护 [React 版本](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2F3lang3%2Freact-vant)和[支付宝小程序版本](https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Fant-move%2FVant-Aliapp)。

• 一、Vant特性

• - 性能极佳，组件平均体积小于 1KB（min+gzip）
  -  65+ 个高质量组件，覆盖移动端主流场景
  -  使用 TypeScript 编写，提供完整的类型定义
  -  单元测试覆盖率超过 90%，提供稳定性保障
  -  提供完善的中英文文档和组件示例
  - .......

• 二、安装Vant支持

• 我们创建的Vue项目并不会默认就支持Vant
  
  所以,我们需要安装Vant的支持到Vue项目中
  
  在打开的idea界面最下方,找到Terminal点击
  
  在出现的命令行中输入安装Vant的指令
  
  运行安装Vant的npm命令:(-S的S是大写的!!!!!!!)
  
  D:\vue-home\demo-vant>npm i vant@latest-v2 -S
  
  安装结束后可能有警告,可以忽略
  
  最终可能看到下面的结果
  
  added 4 packages in 3s
  
  到此为止,我们就将Vant运行需要的文件安装在vue项目中了

  • 添加Vant引用

  • 如果想要在项目中使用Vant提供的组件
    需要在Vue项目代码中添加Vant的引用
    
    Vue项目的src/main.js文件中,添加引用代码如下
    import Vant from 'vant'
    import 'vant/lib/index.css'
    
    Vue.use(Vant)
    ```
    
    添加了上面的引用,当前Vue项目就可以使用Vant组件了
    
    为了实时运行项目,我们先启动Vue项目,测试表示它正常运行
    
    可以在idea提供的Terminal界面中编写如下代码
    D:\vue-home\demo-vant>npm run serve
    打开浏览器
    输入localhost:8080
    进入移动端页面调试模式
    以Google浏览器为例按F12进入调试模式后点击移动端调试即

  • 所有组件的演示代码,都可以从官网获取 https://youzan.github.io/vant/v2/#/zh-CN/

所有组件的演示代码,都可以从官网获取

https://youzan.github.io/vant/v2/#/zh-CN/