Vant下载以及使用
看官方文档下载一定要看清楚你要下载的是那个版本的项目
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-1.png)
# Vue 3 项目,安装最新版 Vant:
npm i vant -S
# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
下载完成之后接下就是怎么去使用它
官方文档分三种引入使用
(1).是按需引入需要那个组件引入那个可以减少项目的大小也方便开发
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-2.png)
# 安装插件
npm i babel-plugin-import -D
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
(上面内容我也是直接扒的官方原文-学无止境不要在意学是谁的只要是自己学到的都是自己的虽说也是用的人家的东西)
下载完插件接下来就是按需引入的流程我们需要自己手动创建一个文件
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-3.png)
需要我们自己当前项目src目录下创建一个文档和文档下的文件分别是(VANt--index.js)两个文件
文件名字可以根据自己去命名也可以叫(plugins文件里面叫Vant.js文件)都可以
然后我们把刚才创建的两个文件挂在到main.js上面就可以了
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-4.png)
接着就是在js文件夹里面引入和使用
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-5.png)
上面分别也有注释首先引入VUE因为我们需要在上面挂在我们所按需引入的组件名字去注册吧(我自己瞎说的哈)
引入组件和使用组件这两段代码在官方里面也有说明不知道的我下班可以再附一份截图
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-6.png)
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-7.png)
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-8.png)
以上就是按需引入的流程使用哪个就引入那个,如果觉得我说的不对可以评论下告诉我
(2).手动按需引入插件
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-9.png)
官方说的意思是不使用第一种方法不下载npm i babel-plugin-import -D这个插件
下载完Vant 直接把需要引入组件的文件以及css样式直接挂在到main.js上面文章来源:https://www.toymoban.com/news/detail-770287.html
(3)一次性把能用到的不能用到的全部引入就不用麻烦,但是也像官网上说的会导致项目体积增大文章来源地址https://www.toymoban.com/news/detail-770287.html
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-10.png)
适配Rem
![vant ui,html5,Powered by 金山文档](https://imgs.yssmx.com/Uploads/2024/01/770287-11.png)
npm i amfe-flexible -D
npm i babel-plugin-import -D
到了这里,关于移动端Vant-Ui库以及适配Rem插件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!