UI 元件庫引入使用的問題

一、按需載入問題：

1、自動按需載入：借助 webpack 的外掛程式，自動把全域性引入的元件變成按需引入的元件。

babel-plugin-import 是一款 babel 外掛程式，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式

在不使用外掛程式的情況下，可以手動引入需要的元件

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 元件庫，引入到專案中，會有樣式問題。

問題描述：ui 元件庫中的長度單位，一般都是使用 px 的，如果專案中使用了 rem 轉換的外掛程式。元件庫中的 css檔案也會被處理了，顯示出來的效果就會非常的小。

原因分析：ui框架一般都是在dpr=1下，寫的元件。

解決方案：或或

這種方案，需要 px-rem 工具具有兩種轉換標準。一種是設計稿750px的轉換為rem的比例，另一種是ui元件庫375px的轉換為人的比例。

注意：.postcssrc.js 檔案在vue-cli中建立時就有。

方案2：專案的 dpr 的值和 ui元件庫的dpr值一樣。就可以完美解決這個問題。

比如我們的設計稿寬是750px，手機上物理畫素的寬度是375px。ui元件庫一般是以dpr=1（即視口的寬度為375px）下寫的，作為css的單位的。那麼我們也必須以375px的視口作為css的單位。

即設計稿上的寬度和 ui元件庫中設計稿的寬度一致就可以了。這樣兩者的px轉rem就是統一的了。

注意：有的軟體提供自動轉換設計稿寬度的功能。如藍狐，可以把設計稿轉換為任意寬度的設計稿。

補充說明：下面meta標籤只是告訴瀏覽器，設定當前頁面視口的寬度（就看出當前文件顯示的解析度），而不是預設手機的解析度。（document文件的寬度始終等於視口的寬度）

<
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

UI 元件庫 引入使用的問題