當你了解了 Vue 項目構建和開發的基本知識后，我認為接下來你一定想親自在構建出的項目中填充自己的業務和功能邏輯，因為目前其還是空白的。 但是這里我不會教你如何實現一個具體的業務和功能模塊，因為每個人想要實現的東西都可能不盡相同。如果你想快速開發一款應用，并且不想過多的操心頁面 `UI` 層次的內容，比如你不想去實現一個下拉 UI 組件或設計一個 `icon` 圖標，那么我想你有必要了解下 UI 庫及圖標庫的應用。 ## UI 庫 UI 庫是脫離 JS 框架外的一種 “工具”，相比 JS 框架可以幫助你實現各種業務邏輯，其更關注于頁面 UI 層面的實現，比如提供和業務無關的彈窗、導航、表單組件等，為項目 UI 層面的功能提供解決方案，比如 [jQuery UI](https://jqueryui.com/)。 而由于本小冊介紹的 JS 框架是 Vue，所以在 Vue 項目中我們需要使用基于 Vue 開發的 UI 庫。本文將以比較流行的 [Vux](https://doc.vux.li/zh-CN/) 為例，其目前 github star 數已在 14 k 左右。 > Vux 是一款是基于 [WeUI](https://weui.io) 和 `Vue(2.x)` 開發的移動端 UI 組件庫，主要服務于微信頁面。 ### Vux 的安裝和配置 那么我們如何在項目中使用 Vux 呢？首先我們先要進行安裝： ``` yarn add vux # 或者 npm install vux --save ``` 同時我們還需要安裝 [vux-loader](https://doc.vux.li/zh-CN/vux-loader/about.html)： ``` yarn add vux-loader --dev # 或者 npm install vux-loader --save-dev ``` 安裝完成后，我們需要在項目中進行配置，而由于目前 Vux 官網的配置教程未對 Vue CLI 3.x 作出說明，我們先來看下其目前的介紹： ``` /* build/webpack.base.conf.js */ const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原來的 module.exports 代碼賦值給變量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] }) ``` 官方目前的配置是在 Vue CLI 2.x 的 `build/webpack.base.conf.js` 文件中進行修改，merge `vux-loader` 的配置項。那么在 Vue CLI 3.x 中其實原理是一樣的，不一樣的地方在于我們無法直接修改 webpack 配置文件，而需要通過 vue.config.js 中的 `configureWebpack` 配置項來進行修改罷了。代碼如下： ``` /* vue.config.js */ const vuxLoader = require('vux-loader') module.exports = { ... configureWebpack: config => { vuxLoader.merge(config, { plugins: ['vux-ui'] }) }, ... } ``` configureWebpack 配置中提供的 `config` 參數便是 webpack 的配置內容，也可以看作是官方文檔中提到的原來在 `webpack.base.conf.js` 中的 `module.exports` 代碼。 ### Vux 的使用 當我們配置好 Vux 后，我們便可以在項目中使用了。Vux 為我們提供了很多項目中常用的組件和工具函數等，比如我們在全局父組件 App.vue 中添加一個底部導航： ``` <!-- App.vue --> <template> <div id="app"> <router-view/> <tabbar> <tabbar-item :link="{name: 'demo'}"> <span slot="label">Demo</span> </tabbar-item> <tabbar-item :link="{name: 'laboratory'}"> <span slot="label">實驗室</span> </tabbar-item> <tabbar-item :link="{name: 'about'}"> <span slot="label">關于</span> </tabbar-item> </tabbar> </div> </template> <script> import { Tabbar, TabbarItem } from 'vux' export default { components: { Tabbar, TabbarItem, } } </script> <style lang="less"> @import '~vux/src/styles/reset.less'; </style> ``` 我們通過引入組件的方式將導航組 `Tabbar`、`TabbarItem` 件引入并注冊到頁面中，這樣通過 Vux 文檔中的介紹我們便可以對相應組件進行配置。呈現效果如下：  需要注意的是我們需要在 App.vue 中引入 Vux 的 `reset` 樣式 less 文件以解決樣式呈現不統一的問題。關于其他 Vux 組件的配置可以參考官方文檔：[組件](https://doc.vux.li/zh-CN/components/actionsheet.html) ### 其他 UI 庫（框架） 除了上方介紹的 Vux 外，類似的 Vue 的第三方 UI 庫還有很多，這里我列舉幾個比較常用的： * [iview](https://www.iviewui.com/)：一套基于 Vue.js 的高質量 UI 組件庫（PC端） * [iView Admin](https://github.com/iview/iview-admin)：搭配使用iView UI組件庫形成的一套后臺集成解決方案（PC端） * [Element](http://element-cn.eleme.io/#/zh-CN)：一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫（PC端） * [Vue Antd](http://okoala.github.io/vue-antd/#!/docs/introduce)：Ant Design 的 Vue 實現，開發和服務于企業級后臺產品（PC端） * [VueStrap](http://yuche.github.io/vue-strap/)：一款 Bootstrap 風格的 Vue UI 庫（PC端） * [Mint UI](http://mint-ui.github.io/#!/zh-cn)：由餓了么前端開發的基于 Vue.js 的移動端組件庫（移動端） * [Vonic](https://wangdahoo.github.io/vonic-documents/#/?id=vonic)：一個基于 vue.js 和 ionic 樣式的 UI 框架，用于快速構建移動端單頁應用（移動端） * [Vant](https://youzan.github.io/vant/#/zh-CN/intro)：輕量、可靠的移動端 Vue 組件庫（移動端） * [Cube UI](https://didi.github.io/cube-ui/#/zh-CN/docs/introduction)：基于 Vue.js 實現的精致移動端組件庫（移動端） ## 圖標庫 了解完 UI 庫，我們再來了解下圖標庫。圖標庫，顧名思義就是匯聚了大量圖標的倉庫，在這樣的倉庫中我們可以查找并下載我們想要的圖標，甚至還可以制定顏色和大小。 在項目中使用圖標庫可以為我們的項目制定統一的圖標管理標準，同時一定程度上也可以減少項目圖片的數量。下面我們便來介紹下目前最流行的一款圖標庫 [Iconfont](http://www.iconfont.cn)。 ### 使用 Iconfont 下載管理圖標 > `Iconfont` 是阿里媽媽 `MUX` 傾力打造的矢量圖標管理、交流平臺。 設計師將圖標上傳到 Iconfont 平臺，用戶可以自定義下載多種格式的 icon，平臺也可將圖標轉換為字體，便于前端工程師自由調整與調用。  在 Iconfont 首頁，我們可以點擊圖標庫來進行圖標的搜索。這里我們可以點擊官方圖標庫后選擇 Ant Design 官方圖標庫進入。  進入對應的圖標庫后，我們可以選擇對應的圖標加入購物車，同時購物車會更新添加后的圖標數量。  選擇完成后，為了使圖標便于今后管理，我們可以新建一個項目并將圖標移入項目中。在項目中，我們便可以進行圖標的添加、刪除和下載等操作（需要登錄）。  這里我們采用將圖標下載到本地的方式進行使用，當然你也可以使用在線鏈接，但這會受到網絡的影響。 ### Iconfont 的使用 下載到本地后，我們需要將文件夾中的 `iconfont.css`、`iconfont.eot`、`iconfont.svg`、`iconfont.ttf` 和 `iconfont.woff` 文件統一放到項目中去，比如我們可以放入新建的 assets 文件夾的 iconfont 中去。而 iconfont.css 便是管理這樣圖標字體的樣式文件，我們可以將其引入到入口文件中： ``` /* main.js */ import './assets/iconfont/iconfont.css' ``` 引入后我們便可以在項目中通過給 html 標簽添加樣式名稱的方式來進行圖標的使用，比如我們在上方 Vux 的導航上添加圖標： ``` <!-- App.vue --> <template> <div id="app"> <router-view/> <tabbar> <tabbar-item :link="{name: 'demo'}"> <span slot="icon" class="iconfont icon-bulb"></span> <span slot="label">Demo</span> </tabbar-item> <tabbar-item> <span slot="icon" class="iconfont icon-experiment"></span> <span slot="label">實驗室</span> </tabbar-item> <tabbar-item> <span slot="icon" class="iconfont icon-deploymentunit"></span> <span slot="label">關于</span> </tabbar-item> </tabbar> </div> </template> ``` 按照 Vux 導航文檔添加名稱為 `icon` 的 `solt` 插槽后，我們還需要在標簽上添加對應圖標的 class 名稱，比如 `iconfont icon-bulb`，最終我們的展示效果如圖所示：  ### 其他圖標庫 除了 Iconfont，常用的圖標庫還有： * [Font Awesome](https://fontawesome.com)：世界上最受歡迎且最易于使用的圖標集 * [Ionicons](https://ionicons.com/) ：精美的開源圖標庫，可以用于Web，iOS，Android和桌面應用程序 * [Themify](https://themify.me/themify-icons)：一套用于網頁設計和應用程序的完整圖標 相信以上這些圖標庫就足以使你應付所有項目了。 ## 結語 本文介紹了 Vue 項目開發中可能會使用到的 UI 庫與圖標庫的應用，以 Vux 和 Iconfont 為例講解了它們在項目中的使用方法和注意事項，相信大家能夠在項目構建和開發的基礎上使用 UI 庫與圖標庫快速實現自己的項目 UI 層面的功能和展示，為自己的項目添磚加瓦。 具體實例代碼可以參考：[ui-framework-project](https://github.com/luozhihao/vue-project-code/tree/master/ui-framework-project) ## 思考 & 作業 * 查看 Vux 源碼，嘗試自己編寫一個 UI 插件 * Iconfont 是矢量圖標庫，其相比位圖的主要區別是什么？