Vant
什么是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://github.com/3lang3/react-vant)和[支付宝小程序版本
](
https://github.com/ant-move/Vant-Aliapp)。
使用Vant 2.x版本可以浏览网站
Vant 2 – Mobile UI Components built on Vue
Vant的优势
ElementUI是开发电脑浏览器页面的组件库
而Vant是开发移动端显示页面的组件库
Vant特性
-
🚀 性能极佳，组件平均体积小于 1KB（min+gzip）
-
🚀 65+ 个高质量组件，覆盖移动端主流场景
-
💪 使用 TypeScript 编写，提供完整的类型定义
-
💪 单元测试覆盖率超过 90%，提供稳定性保障
-
📖 提供完善的中英文文档和组件示例
-
…….
创建Vant程序
创建Vue项目
首先确定一个文件夹创建Vue项目
G盘下创建一个文件夹vue-home
进入文件夹在地址栏输入cmd，打开dos命令行
G:\vue-home>vue create demo-vant
添加\安装Vant支持
创建一个Vue项目,Vue项目不会自动支持Vant
需要将Vant添加到Vue项目中
进入到刚刚创建的项目的文件夹
G:\vue-home>cd demo-vant
运行安装\添加Vant支持的npm命令
G:\vue-home\demo-vant>npm i vant@latest-v2 -S
运行结束后可能有警告,无视掉
最终看到的提示可能是
added 5 packages in 3s
到此为止,当前Vue项目,就支持Vant功能了
利用idea打开这个项目即可
添加Vant引用
如果想在Vue项目中开始使用Vant的功能
还需要在Vue项目代码中添加Vant的引用
Vue项目的src/main.js中,添加如下引用,启用Vant功能
// 添加Vant引用
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant)
添加了上面的引用,当前Vue项目就可以使用Vant组件了
为了实时运行项目,启动Vue项目
在idea的Terminal中编写启动代码
G:\vue-home\demo-vant>npm run serve
打开浏览器
输入localhost:8080
进入移动端页面调试模式
以Google浏览器为例按F12进入调试模式后点击移动端调试即可
使用npm命令如下:可以下载全国省市区数据
G:\vue-home\demo-vant>npm i @vant/area-data