移动端Vant-Ui库以及适配Rem插件

Vant下载以及使用

  1. 看官方文档下载一定要看清楚你要下载的是那个版本的项目

# Vue 3 项目,安装最新版 Vant:
npm i vant -S

# Vue 2 项目,安装 Vant 2:
npm i vant@latest-v2 -S
  1. 下载完成之后接下就是怎么去使用它

官方文档分三种引入使用

(1).是按需引入需要那个组件引入那个可以减少项目的大小也方便开发

# 安装插件
npm i babel-plugin-import -D
// 接着你可以在代码中直接引入 Vant 组件
// 插件会自动将代码转化为方式二中的按需引入形式
(上面内容我也是直接扒的官方原文-学无止境不要在意学是谁的只要是自己学到的都是自己的虽说也是用的人家的东西)

下载完插件接下来就是按需引入的流程我们需要自己手动创建一个文件
需要我们自己当前项目src目录下创建一个文档和文档下的文件分别是(VANt--index.js)两个文件
文件名字可以根据自己去命名也可以叫(plugins文件里面叫Vant.js文件)都可以
然后我们把刚才创建的两个文件挂在到main.js上面就可以了
接着就是在js文件夹里面引入和使用

上面分别也有注释首先引入VUE因为我们需要在上面挂在我们所按需引入的组件名字去注册吧(我自己瞎说的哈)

引入组件和使用组件这两段代码在官方里面也有说明不知道的我下班可以再附一份截图

以上就是按需引入的流程使用哪个就引入那个,如果觉得我说的不对可以评论下告诉我

(2).手动按需引入插件

官方说的意思是不使用第一种方法不下载npm i babel-plugin-import -D这个插件

下载完Vant 直接把需要引入组件的文件以及css样式直接挂在到main.js上面

(3)一次性把能用到的不能用到的全部引入就不用麻烦,但是也像官网上说的会导致项目体积增大

适配Rem

npm i amfe-flexible -D
npm i babel-plugin-import -D
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值