本文主要介紹 mint-ui 的目錄結(jié)構(gòu)典蝌、所有的技術(shù)棧以及組件庫的搭建知識容诬。
mint-ui 項目整體學習
項目目錄
看圖說話~
- .github 目錄用于規(guī)范一些 github 行為蜗字，其中存的都是些 md 文件形庭。
- build 目錄用于構(gòu)建組件庫項目奄侠。其中使用了餓了么的 cooking 工具進行構(gòu)建瞬内。
- example 目錄中是演示項目迷雪，用來演示組件庫的使用。許多在官方文檔中沒有寫全的東西都可以在這個目錄下看到虫蝶。這個演示項目的線上地址請看這里
- lib 目錄中是構(gòu)建完成的打包 js 和 css 文件章咧，這就是我們最終引用組件庫的時候用到的文件。
- node_modules 請忽略……
- packages 目錄下存放了組件庫中的所有組件能真。在編譯構(gòu)建的時候入口文件會去 packages 目錄下拿到所有組件赁严。像這樣
import Button from '../packages/button';扰柠。 - src 目錄下是組件庫的一些通用代碼了，也是入口文件所在疼约。
組件庫如何應(yīng)用到 Vue 項目中卤档？
組件庫的安裝其實就是使用了 Vue 的插件定義和使用的方式〕贪可以看下 mint-ui 定義的插件公開方法 install：
import Button from '../packages/button';
import Toast from '../packages/toast';
import Indicator from '../packages/indicator';
import MessageBox from '../packages/message-box';
import InfiniteScroll from '../packages/infinite-scroll';
import '../src/assets/font/iconfont.css'; // 字體樣式
const version = '2.2.13';
const install = function(Vue, config = {}) {
// 避免重復(fù)安裝
if (install.installed) return;
// 注冊組件
Vue.component(Button.name, Button);
// 使用插件
Vue.use(InfiniteScroll);
// 添加實例方法
Vue.$messagebox = Vue.prototype.$messagebox = MessageBox;
Vue.$toast = Vue.prototype.$toast = Toast;
Vue.$indicator = Vue.prototype.$indicator = Indicator;
};
組件庫的 install 方法一般就 3 種行為：
- 全局注冊組件庫
- 使用插件方法
- 添加全局實例方法
這也就是我們組件庫中常用的功能了劝枣。
想看懂 mint-ui 源碼需要知道什么技術(shù)棧？
- JS 語法使用了 vue.js 框架（這想必大家都知道）织鲸。
- 在 css 樣式上使用的是 postcss-salad舔腾。它類似于 sass，常用的功能就是將一些類名進行包裝了搂擦，如
@when plain其實就是.is-plain選擇器稳诚。
我在看組件庫的時候在找 postcss-salad 上花了點時間。
如何搭建類似 mint-ui 的組件庫瀑踢？
其實市面上完善的通用組件庫已有不少扳还，像 Vue 方面的有 ElementUI、 Vant橱夭、 MintUI 和 iView氨距， Antd 好像也出了 Vue 版本。所以徘钥，個人感覺重復(fù)造輪子無意義衔蹲，但是以學習的態(tài)度去將一些常用到的業(yè)務(wù)組件抽離出來做一個組件庫也是極好的提高生產(chǎn)效率的方式。
說說我搭建的個人組件庫的過程：
- 使用 vue-cli 搭建一個項目呈础。
- 參考主流組件庫的目錄結(jié)構(gòu)搭建項目。其中比較好的全局方法完全可以挪用橱健。
- 寫組件而钞，寫什么組件看自己需求。那些主流組件庫的很多東西是很有借鑒和學習意義的拘荡。
- 寫完組件庫之后使用 vue-cli 項目的構(gòu)建命令構(gòu)建出打包文件臼节。
- 最后配置 package.json 然后上傳 npm（也可以不傳 npm 直接 git 就可以導(dǎo)出項目），就這樣大功告成珊皿。
mint-ui 的 src 目錄下都有些什么网缝，干啥用的？
- assets 目錄下是資源文件蟋定，存放了字體文件和加載中的 svg 圖片粉臊。
- mixins 目錄下就一個 emitter.js 文件，作用是定義了父子組件間向上和向下的通信（之前 Vue 也有這個功能驶兜，后來取消了）扼仲。
- style 目錄下是一些全局的樣式远寸，其中 var.css 定義了全局的皮膚⊥佬祝可以實現(xiàn)快速換膚的功能驰后。注： mint-ui 中所有的 css 都是用了 salad 來預(yù)編譯，所以樣式文件看著都怪怪的矗愧，像 sass 又不是 sass灶芝。
- utils 目錄中是一些通用的工具方法代碼，這里面的工具很有參考價值唉韭，可以拿來使用夜涕。具體看看有啥：
- popup 目錄中是懸浮框的業(yè)務(wù)邏輯。
- clickoutside.js 中定義了點擊元素外觸發(fā)的事件
- dom.js 中處理一些與 dom 相關(guān)的方法纽哥。主要處理 dom 事件钠乏、dom 元素上的 class 和 style 的處理。
- merge.js 方法用于將多個對象合并給目標對象并返回目標對象春塌。
- index.js 方法是組件庫的入口文件晓避，主要功能上面提到過了。主要做了幾步：導(dǎo)入組件庫所有組件和插件只壳；使用 Vue 的插件定義方法將組件庫變?yōu)?Vue 插件俏拱；在插件中注冊組件、使用插件并添加實例方法吼句；最后導(dǎo)出插件方法以及所有的單個組件锅必。
相對于 element-ui 的 utils 目錄，mint-ui 的 utils 目錄真的是非常少的惕艳。不過其中的方法還是值得借鑒和學習的搞隐。
最后
文章內(nèi)容較少，只是先起個頭~
這個整體分析沒太多講的远搪，大致了解下劣纲，也是自己整理下思路。為接下來一系列的文章做熱身谁鳍。
Vue 實驗室之前有分析過一些 Element 的簡單組件庫癞季，之后的 mint-ui 組件學習只會對博主感興趣的、比較有意思的組件進行分析和學習倘潜。如有需求也可以評論留言哦绷柒。
其實能擁有一個私人組件庫還是一件非常酷的事情啦讓我們一起擼一個個人組件庫
