当前位置:   article > 正文

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

vant ui

Vant下载以及使用

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

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

官方文档分三种引入使用

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

  1. # 安装插件
  2. npm i babel-plugin-import -D
  3. // 接着你可以在代码中直接引入 Vant 组件
  4. // 插件会自动将代码转化为方式二中的按需引入形式
  5. (上面内容我也是直接扒的官方原文-学无止境不要在意学是谁的只要是自己学到的都是自己的虽说也是用的人家的东西)
  6. 下载完插件接下来就是按需引入的流程我们需要自己手动创建一个文件
  1. 需要我们自己当前项目src目录下创建一个文档和文档下的文件分别是(VANt--index.js)两个文件
  2. 文件名字可以根据自己去命名也可以叫(plugins文件里面叫Vant.js文件)都可以
  3. 然后我们把刚才创建的两个文件挂在到main.js上面就可以了
接着就是在js文件夹里面引入和使用

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

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

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

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

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

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

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

适配Rem

  1. npm i amfe-flexible -D
  2. npm i babel-plugin-import -D
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/不正经/article/detail/92361
推荐阅读
相关标签
  

闽ICP备14008679号