摘要：開發模式預覽在開發一個組件庫時，肯定需要一邊預覽，一邊修改代碼。一般業界常見方案是自己開發展示文檔但這樣會帶來一個組件庫和文檔如何同步的問題。一方面有利于維護，另一方面是讀取源碼時也有類型提示。

在開發一個 ui 組件庫時，肯定需要一邊預覽 demo，一邊修改代碼。

常見的解決方案是像開發一般項目一樣使用 webpack-dev-server 預覽組件，比如通過 vue-cli 初始化項目，或者自己配置腳本。

文藝一點兒地可能會用到 parcel 來簡化 demo 的開發配置（比如 muse-ui）。

作為一個 ui 組件庫，也肯定要有自己的組件展示文檔。

一般業界常見方案是自己開發展示文檔...

但這樣會帶來一個組件庫和文檔如何同步的問題。

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

從開發步驟上來說，甚至可以先寫文檔說明，再具體地編寫代碼實現組件功能。這樣一來文檔即是預覽 demo，與組件開發可以同步更新。

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

docz

doc-scripts

在開發和使用過程中如果對于一些對象、方法的參數能夠智能提示，豈不美哉？

如何實現呢？

其實就是在相應文件夾中添加組件相關的類型聲明（*.d.ts），并通過 src/index.d.ts 導出。

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

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

和打包庫一樣，選了 rollup。

在開發中用不用 *.vue 這樣的單文件組件來開發呢？

muse-ui 完全不寫