1.?圖標(biāo)素材（iconfont簡介）

制作字體圖標(biāo)的工具有很多，推薦使用：iconfont-阿里巴巴矢量圖標(biāo)庫。

• 注冊賬戶

• 創(chuàng)建項目

????????可以根據(jù)項目自定義?class 前綴

• 上傳圖標(biāo)到項目

• 生成鏈接，復(fù)制 css 代碼，在項目中使用。

2. Vant 組件庫

????????Vant 是有贊商城前端開發(fā)團隊開發(fā)的一個基于 Vue.js 的移動端組件庫，它提供了非常豐富的移動端功能組件，簡單易用。

• 官方文檔

• GitHub 倉庫

下面是在 Vant 官網(wǎng)中列出的一些優(yōu)點：

• 60+ 高質(zhì)量組件

• 90% 單元測試覆蓋率

• 完善的中英文文檔和示例

• 支持按需引入

• 支持主題定制

• 支持國際化

• 支持 TS

• 支持 SSR

????????項目中主要使用 Vant 作為核心組件庫，下面根據(jù)官方文檔將 Vant 導(dǎo)入項目中。

將 Vant 引入項目一共有四種方式：

• 方式一：自動按需引入組件

  • 和方式二一樣，都是按需引入，但是加載更方便一些（需要額外配置插件）

  • 優(yōu)點：打包體積小

  • 缺點：每個組件在使用之前都需要手動加載注冊

• 方式二：手動按需引入組件

  • 在不使用插件的情況下，可以手動引入需要的組件

  • 優(yōu)點：打包體積小

  • 缺點：每個組件在使用之前都需要手動加載注冊

• 方式三：導(dǎo)入所有組件

  • Vant 支持一次性導(dǎo)入所有組件，引入所有組件會增加代碼包體積，因此不推薦這種做法

  • 優(yōu)點：導(dǎo)入一次，使用所有

  • 缺點：打包體積大

• 方式四：通過 CDN 引入

  • 使用 Vant 最簡單的方法是直接在 html 文件中引入 CDN 鏈接，之后你可以通過全局變量vant訪問到所有組件。

  • 優(yōu)點：適合一些演示、示例項目，一個 html 文件就可以跑起來

  • 缺點：不適合在模塊化系統(tǒng)中使用

3. 移動端 REM 適配

????????

Vant 中的樣式默認(rèn)使用 px 作為單位，如果需要使用 rem 單位，推薦使用以下兩個工具：

• postcss-pxtorem 是一款 postcss 插件，用于將單位轉(zhuǎn)化為 rem

• lib-flexible 用于設(shè)置 rem 基準(zhǔn)值

下面我們分別將這兩個工具配置到項目中完成 REM 適配。

3.1?使用 lib-flexible 動態(tài)設(shè)置 REM 基準(zhǔn)值（html 標(biāo)簽的字體大小）

• 安裝

yarn add amfe-flexible
或者npm i amfe-flexible

• 然后在 main.js 中加載執(zhí)行該模塊

3.2 使用 postcss-pxtorem 將 px 轉(zhuǎn)為 rem

• 安裝

# yarn add -D postcss-pxtorem
# -D 是 --save-dev 的簡寫
npm install postcss-pxtorem -D

• 然后在項目根目錄中創(chuàng)建 postcssrc.config.js 文件

參考vant官方文檔，如下。

• 配置完畢，重新啟動服務(wù)，刷新瀏覽器頁面，審查元素的樣式查看是否已將 px 轉(zhuǎn)換為 rem。

需要注意的是：

• 該插件不能轉(zhuǎn)換行內(nèi)樣式中的 px，例如 <div style="width: 200px;"></div>

3.3 關(guān)于 postcssrc.config.js 配置文件

PostCSS.config.js 是 PostCSS 的配置文件。

（1）PostCSS 介紹

PostCSS 是一個處理 CSS 的處理工具，本身功能比較單一，它主要負(fù)責(zé)解析 CSS 代碼，再交由插件來進(jìn)行處理，它的插件體系非常強大，所能進(jìn)行的操作是多種多樣的，例如：

• Autoprefixer 插件可以實現(xiàn)自動添加瀏覽器相關(guān)的聲明前綴

• PostCSS Preset Env 插件可以讓你使用更新的 CSS 語法特性并實現(xiàn)向下兼容

• postcss-pxtorem 可以實現(xiàn)將 px 轉(zhuǎn)換為 rem

• ...

目前 PostCSS 已經(jīng)有 200 多個功能各異的插件。開發(fā)人員也可以根據(jù)項目的需要，開發(fā)出自己的 PostCSS 插件。

PostCSS 一般不單獨使用，而是與已有的構(gòu)建工具進(jìn)行集成。

Vue CLI 默認(rèn)集成了 PostCSS，并且默認(rèn)開啟了 autoprefixer 插件。

Vue CLI 內(nèi)部使用了 PostCSS。

你可以通過 psotCSS.config.js 或任何 postcss-load-config 支持的配置源來配置 PostCSS。也可以通過 vue.config.js 中的 css.loaderOptions.postcss 配置 postcss-loader。

我們默認(rèn)開啟了 autoprefixer。如果要配置目標(biāo)瀏覽器，可使用 package.json 的 browserslist 字段。

（2）Autoprefixer 插件的配置

autoprefixer 是一個自動添加瀏覽器前綴的 PostCss 插件，browsers 用來配置兼容的瀏覽器版本信息，但是寫在這里的話會引起編譯器警告。

（3）postcss-pxtorem 插件的配置

• rootValue：表示根元素字體大小，它會根據(jù)根元素大小進(jìn)行單位轉(zhuǎn)換

• propList 用來設(shè)定可以從 px 轉(zhuǎn)為 rem 的屬性

  • 例如 * 就是所有屬性都要轉(zhuǎn)換，width 就是僅轉(zhuǎn)換 width 屬性

rootValue 應(yīng)該如何設(shè)置呢？

????????如果你使用的是基于 lib-flexable 的 REM 適配方案，則應(yīng)該設(shè)置為你的設(shè)計稿的十分之一。
例如設(shè)計稿是 750 寬，則應(yīng)該設(shè)置為 75。

大多數(shù)設(shè)計稿的原型都是以 iphone6 為原型，iphone6 設(shè)備的寬是 750，我們的設(shè)計稿也是這樣。

但是 Vant 建議設(shè)置為 37.5，為什么呢？

????????因為 Vant 是基于 375 寫的，所以如果你設(shè)置為 75 的話，Vant 的樣式就小了一半。所以如果設(shè)置為 37.5 的話，Vant 的樣式是沒有問題的，但是我們在測量設(shè)計稿的時候都必須除 2 才能使用，否則就會變得很大。

通過查閱文檔我們可以看到 rootValue 支持兩種參數(shù)類型：

• 數(shù)字：固定值

• 函數(shù)：動態(tài)計算返回

  • postcss-pxtorem 處理每個 CSS 文件的時候都會來調(diào)用這個函數(shù)

  • 它會把被處理的 CSS 文件相關(guān)的信息通過參數(shù)傳遞給該函數(shù)

所以修改配置如下：

????????假設(shè)設(shè)計稿寬是750px的情況下，在寫 css?樣式的時候就可以量多少寫多少，而不用再去除以2。