vuecomp starter

vuecomp-starter

說明文件：https://windlil.github.io/vuecomp-starter/

介紹

開源的Vue3 + Typescript 元件庫開發模板，簡單輕鬆建立功能完善的元件庫，按照約定的目錄編排來進行開發，使開發者只需關注元件的開發以及說明文件的編寫，無需關注其他繁瑣的配置。

支援說明文件網站的自動部署，可以幫助一鍵部署到GithubPage。

相信許多小夥伴都希望能自己開發出一套元件庫，這是很有成就感的一件事，但是大部分人都困在組件庫開發的前期構建以及打包階段，而vuecomp-starter就是為此而生。

特性

• 約定式開發，大幅減輕開發者工作量
• 已經完成組件庫前期建置和打包階段，只需要關注到組件的開發
• 依照約定目錄進行開發，打包後的元件庫能夠支援按需導入，完美配合TreeShaking
• 整合Vitepress，依照約定位置建立文件會自動配置路由，只需要注意文件內容的編寫
• 對測試環境支援約定式路由寫法，無需編寫路由文件
• 配備了完善的自動化創建腳本，減少繁瑣的文件創建過程
• 透過簡單的修改環境變數來修改開發方式
• 支援說明文件自動化部署

建議在初次開發的時候詳細閱讀該文檔

安裝

 # install degit
npm  i -g degit

# clone starter
degit windlil/vuecomp-starter [your project name]

# switch to your project directory
cd [your project name]

# install dependence
pnpm i

# open docs
pnpm docs:dev

scripts指令介紹

• pnpm build : 將元件庫進行打包。
• pnpm docs:dev : 開啟說明文件服務。
• pnpm comp:play : 開啟元件測試環境。
• pnpm docs:build : 打包說明文件。

自動化腳本：

• pnpm comp:create [component name] : 建立元件文件，並自動引入到匯出根文件。
• pnpm comp:new [component name] : 建立測試環境元件檔。
• pnpm docs:new [component name] : 建立新的元件說明文件。
• pnpm component:create [component name] : pnpm comp:create 、 pnpm comp:new 、 pnpm docs:new合併指令，建議使用。

env配置介紹

在初次開發的時候需要對根目錄的.env檔進行設定修改

 # CSS预处理器 默认支持sass和less
CSS_PREPROCESSOR = 'scss'
# 用于添加组件命名前缀，建议采用首字母大写格式，最后生成的组件会采取类似这种格式:<vc-button></vc-button>
COMPONENT_NAME = 'Vc'

組件開發約定

元件開發建議採用以下目錄結構：

 ├─packages
|    ├─components
|    |     ├─style
|    |     |   └index.scss          // 组件库全局样式
|    |     ├─src
|    |     |  ├─components.ts       // 导出所有组件
|    |     |  ├─index.ts            // 全局注册所有组件
|    |     |  ├─button              // 组件文件
|    |     |  |   ├─index.ts        // 在此进行导出和局部注册
|    |     |  |   ├─src             // ❗实际开发中只需要关注到src下的文件
|    |     |  |   |  ├─button.vue 
|    |     |  |   |  ├─style
|    |     |  |   |  |   └index.scss

建議採用指令pnpm component:create [component name]來建立新元件，幫助自動完成繁瑣的引入和建立步驟。

如果不採用自動命令，則按照範本已建立的範例元件的模式來進行開發，這種方法會相當繁瑣，因此強烈建議使用指令的方式進行新元件建立！

說明文件開發約定

 ├─docs
|  ├─index.md               // 文档首页内容
|  ├─guide              
|  |   ├─features.md        // 特性
|  |   ├─started.md         // 快速上手
|  |   ├─components         // 各组件的具体说明
|  |   |     └button.md

只需要關注docs/guide/components/下md 檔案的編寫，會自動建立新的側邊欄內容以及路由，不需要關注其它的設定檔。

️注意，需要在md檔案採用以下的格式來決定側邊欄的名稱：

 ---
sider_text="按钮 button"
---

元件說明文件具體內容可參考範例元件。

自動化部署

具體檔案在./.github/workflows/deploy.yaml

示例：
git tag [email protected]

git add .

git commit -m 'chore: update'

git push

git push origin [email protected]

License

MIT