摘要：開發(fā)模式預(yù)覽在開發(fā)一個(gè)組件庫(kù)時(shí)，肯定需要一邊預(yù)覽，一邊修改代碼。一般業(yè)界常見(jiàn)方案是自己開發(fā)展示文檔但這樣會(huì)帶來(lái)一個(gè)組件庫(kù)和文檔如何同步的問(wèn)題。一方面有利于維護(hù)，另一方面是讀取源碼時(shí)也有類型提示。

在開發(fā)一個(gè) ui 組件庫(kù)時(shí)，肯定需要一邊預(yù)覽 demo，一邊修改代碼。

常見(jiàn)的解決方案是像開發(fā)一般項(xiàng)目一樣使用 webpack-dev-server 預(yù)覽組件，比如通過(guò) vue-cli 初始化項(xiàng)目，或者自己配置腳本。

文藝一點(diǎn)兒地可能會(huì)用到 parcel 來(lái)簡(jiǎn)化 demo 的開發(fā)配置（比如 muse-ui）。

作為一個(gè) ui 組件庫(kù)，也肯定要有自己的組件展示文檔。

一般業(yè)界常見(jiàn)方案是自己開發(fā)展示文檔...

但這樣會(huì)帶來(lái)一個(gè)組件庫(kù)和文檔如何同步的問(wèn)題。

由于 vuepress 支持在 markdown 中插入組件，所以我們其實(shí)可以很自然地邊寫文檔邊開發(fā)組件。

從開發(fā)步驟上來(lái)說(shuō)，甚至可以先寫文檔說(shuō)明，再具體地編寫代碼實(shí)現(xiàn)組件功能。這樣一來(lái)文檔即是預(yù)覽 demo，與組件開發(fā)可以同步更新。

p.s. React 的組件文檔可以試試這倆庫(kù)：

docz

doc-scripts

在開發(fā)和使用過(guò)程中如果對(duì)于一些對(duì)象、方法的參數(shù)能夠智能提示，豈不美哉？

如何實(shí)現(xiàn)呢？

其實(shí)就是在相應(yīng)文件夾中添加組件相關(guān)的類型聲明（*.d.ts），并通過(guò) src/index.d.ts 導(dǎo)出。

{
    "typings": "src/index.d.ts",
}

一開始將聲明文件都放在 types/ 文件夾下，但在實(shí)踐中覺(jué)得還是放在當(dāng)前文件夾下比較好。一方面有利于維護(hù)，另一方面是讀取源碼時(shí)也有類型提示。

和打包庫(kù)一樣，選了 rollup。

在開發(fā)中用不用 *.vue 這樣的單文件組件來(lái)開發(fā)呢？

muse-ui 完全不寫