UI 组件库 引入使用的问题

一、按需加载问题:https://youzan.github.io/vant/#/zh-CN/quickstart

  1、自动 按需加载: 借助 webpack 的插件,自动把  全局引入的组件  变成  按需引入  的组件。

    babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

  2、手动 按需加载: 不需要 另外下载 wepack的插件

    在不使用插件的情况下,可以手动引入需要的组件

import Button from 'vant/lib/button';
import 'vant/lib/button/style'

  3、(不推荐) 把 node_modules 目录下的 组件,复制出来放到 src 目录下。因为 node_modules 里面的组件文件,往往有很多的依赖关系。移动一个就要连带着移动好多文件了。

二、UI 组件库,引入到项目中,会有样式问题。

  问题说明:UI 组件库中的 长度单位,一般都是使用 px 的,如果项目中使用了 rem 转换的插件。组件库中的 css文件也会被处理了,显示出来的效果就会非常的小

  解决方案:

    方案1:

    方案2:方案2 是作为方案1的 补充,手动一个一个标签 去修改。

.title /deep/ .zhujian{
  width: 100px;  
}

猜你喜欢

转载自www.cnblogs.com/wfblog/p/12105907.html