1、自动 按需加载： 借助 webpack 的插件，自动把 全局引入的组件 变成 按需引入 的组件。
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式
2、手动 按需加载： 不需要 另外下载 wepack的插件
在不使用插件的情况下，可以手动引入需要的组件
import Button from 'vant/lib/button';
import 'vant/lib/button/style'不推荐）把 node_modules 目录下的 组件，复制出来放到 src 目录下。node_modules中 UI组件的包，会有对应的 css样式文件。（既然node_modules中有文件，为什么还要复制出来呢。所以这个不推荐）
样式会有几种引入的类型（js文件类型的、less文件类型的、css文件类型的）。如下， vant组件库就是这样的，三者是独立的。（有的组件库，只有一种样式文件，如 mint-ui）
注：css 文件类型的样式，可能只有组件的一部分，不完整的。根据官网给的文档，去看 css 是用了哪些文件。如：vant 官网的css是通过 style/index.js
二、UI 组件库，引入到项目中，会有样式问题。
非常的小。
原因分析：ui框架一般都是在dpr=1下，写的组件。
解决方案： http:///article/p-swviwsjm-byr.html 或 或 （vue-cli3）
方案1：通过配置实现，即修改 px 转 rem工具的配置实现。（参考链接上的第三种方案有说到，但是实践后没有出现效果）
这种方案，需要 px-rem 工具 具有两种转换标准。一种是设计稿750px的转换为rem的比例，另一种是ui组件库375px的转换为人的比例。
.postcssrc.js 文件 在vue-cli中 创建时就有。
方案2：项目的 dpr 的值 和 UI组件库的dpr值一样。就可以完美解决这个问题。
比如我们的设计稿宽是750px，手机上物理像素的宽度是375px。UI组件库一般是以dpr=1（即视口的宽度为375px）下 写的，作为css的单位的。那么我们也必须以375px的视口作为css的单位。
设计稿上的宽度 和 ui组件库中设计稿的宽度
自动转换设计稿宽度的功能。如蓝狐，可以把设计稿转换为任意宽度的设计稿。
补充说明：下面meta标签只是告诉浏览器，设置当前页面视口的宽度（就看出当前文档显示的分辨率），而不是默认手机的分辨率。（document文档的宽度始终等于视口的宽度） https://www.jianshu.com/p/2c33921d5a68
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <!-- 设置页面的分辨率宽度 为 设备 的宽度 -->手动修改 或 工具实现）。
注：复制组件库的css样式，要赋值编译后的css文件，如 上面按需加载 第三 中所说的 那个文件。
辅助方案：使用样式覆盖，项目中的css覆盖 UI 库中的css。一般是少量的css样式修改才这样用，如果把整个ui组件样式，用这种方式肯定很繁琐。
.title /deep/ .zhujian{
width: 100px;
}
