一、按需加載問題：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組件的包，會有對應的 css樣式文件。（既然node_modules中有文件，為什么還要復制出來呢。所以這個不推薦）
注：一般node_modules中組件包的 樣式會有幾種引入的類型（js文件類型的、less文件類型的、css文件類型的）。如下， vant組件庫就是這樣的，三者是獨立的。（有的組件庫，只有一種樣式文件，如 mint-ui）
注：css 文件類型的樣式，可能只有組件的一部分，不完整的。根據官網給的文檔，去看 css 是用了哪些文件。如：vant 官網的css是通過 style/index.js 引入css樣式的，里面的依賴的css文件有多個，index.css 只是其中一個。
二、UI 組件庫，引入到項目中，會有樣式問題。 https://blog.csdn.net/xfmuchengxue/article/details/90379591
問題描述：UI 組件庫中的 長度單位，一般都是使用 px 的，如果項目中使用了 rem 轉換的插件。組件庫中的 css文件也會被處理了，顯示出來的效果就會非常的小。
原因分析：ui框架一般都是在dpr=1下，寫的組件。
解決方案： http://www.voidcn.com/article/p-swviwsjm-byr.html 或 https://blog.csdn.net/qq_24191729/article/details/98846587 或 https://blog.csdn.net/weixin_43743956/article/details/85850850（vue-cli3）
方案1：通過配置實現，即修改 px 轉 rem工具的配置實現。（參考鏈接上的第三種方案有說到，但是實踐后沒有出現效果）
這種方案，需要 px-rem 工具 具有兩種轉換標准。一種是設計稿750px的轉換為rem的比例，另一種是ui組件庫375px的轉換為人的比例。
注意：.postcssrc.js 文件 在vue-cli中 創建時就有。
方案2：項目的 dpr 的值 和 UI組件庫的dpr值一樣。就可以完美解決這個問題。 https://segmentfault.com/q/1010000014793903/a-1020000015837008
比如我們的設計稿寬是750px，手機上物理像素的寬度是375px。UI組件庫一般是以dpr=1（即視口的寬度為375px）下 寫的，作為css的單位的。那么我們也必須以375px的視口作為css的單位。
即 設計稿上的寬度 和 ui組件庫中設計稿的寬度 一致就可以了。這樣兩者的px轉rem就是統一的了。
注意：有的軟件提供自動轉換設計稿寬度的功能。如藍狐，可以把設計稿轉換為任意寬度的設計稿。
補充說明：下面meta標簽只是告訴瀏覽器，設置當前頁面視口的寬度（就看出當前文檔顯示的分辨率），而不是默認手機的分辨率。（document文檔的寬度始終等於視口的寬度） https://www.jianshu.com/p/2c33921d5a68
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <!-- 設置頁面的分辨率寬度 為 設備 的寬度 -->
方案3：將組件庫中的css樣式復制出來，放在一個文件中。把里面的px單位統一改成2倍的px（手動修改 或 工具實現）。
注：復制組件庫的css樣式，要賦值編譯后的css文件，如 上面按需加載 第三 中所說的 那個文件。
輔助方案：使用樣式覆蓋，項目中的css覆蓋 UI 庫中的css。一般是少量的css樣式修改才這樣用，如果把整個ui組件樣式，用這種方式肯定很繁瑣。
.title /deep/ .zhujian{ width: 100px; }