前文已經初始化了 workspace-root，從本文開始就需要依次搭建組件庫、example、文檔、cli。本文內容是搭建 組件庫的開發環境。 ...
前文已經初始化了 workspace-root，從本文開始就需要依次搭建組件庫、example、文檔、cli。本文內容是搭建 組件庫的開發環境。
1 packages 目錄
前面在項目根目錄下創建了 packages 目錄，該目錄存放組件庫的所有組件及組件庫的入口。該目錄中已經創建了兩個子目錄 foo 和 yyg-demo-ui。這兩個目錄是幹嘛用的呢？
1.1 foo 目錄
foo 目錄代表一個示例組件，後面咱們會使用該組件來測試組件庫在 example 和組件庫文檔中是否能正常運行。後續要開發的所有組件（如高級卡片組件、JSON Schema 表單組件等）都與 foo 組件的文件目錄結構保持一致。
1.2 yyg-demo-ui 目錄
該目錄與整個組件庫工程的名稱相同，所以你本地的這個目錄不一定叫這個名稱。該目錄是組件庫的入口模塊，該模塊會安裝組件庫的所有組件（即 packages 目錄下的其他包）作為依賴，並引入全部組件，統一暴露。此外還是打包組件庫的入口。可以將它理解為組件庫的聚合模塊。
2 實現 foo 示例組件
2.1 初始化 package.json
foo 目錄存放示例組件，它也是一個包，所以需要在命令行中進入 packages/foo 目錄，使用 pnpm 初始化：
pnpm init
修改生成的 package.json 中的 name 屬性值為 foo，在 monorepo 中，子包的 name 屬性通常會命名為 @組織名/foo，由於咱是個組件庫，可以將其命名為 @組件庫名/foo，即 @yyg-demo-ui/foo。我修改了 package.json 的下麵幾個屬性：
{
"name": "@yyg-demo-ui/foo",
"version": "1.0.0",
"description": "示例組件",
"author": "程式員優雅哥 youyacoder",
"main": "index.ts",
...
}
2.2 初始化 foo 目錄結構
在命令行中進入 foo 目錄：
- 創建 index.ts 文件，該文件為組件的入口文件：
touch index.ts
- 創建 src 目錄，該目錄存放組件的實現源碼。在 foo/src/ 中創建 index.tsx 和 types.ts，前者是組件的具體實現，後者是組件的 props 定義及類型：
mkdir src
touch src/index.tsx src/types.ts
如此一來，示例組件 foo 的目錄結構便創建完成，目錄結構如下：
packages/
|- foo/
|- index.ts
|- src/
|- index.ts
|- types.ts
|- yyg-demo-ui/
2.3 定義 foo 組件的 props
在 foo/src/types.ts 中定義 foo 組件的 props，並提取其類型：
import { ExtractPropTypes } from 'vue'
export const fooProps = {
msg: {
type: String,
required: false,
default: ''
}
}
export type FooProps = ExtractPropTypes<typeof fooProps>
上面的代碼定義了一個非必填的屬性 msg，並使用 vue 中提供的 ExtractPropTypes 提取 props 的類型。
2.4 實現 foo 組件
在 foo/src/index.tsx 中實現 foo 組件：
import { defineComponent } from 'vue'
import { fooProps } from './types'
const NAME = 'yyg-foo'
export default defineComponent({
name: NAME,
props: fooProps,
setup (props, context) {
console.log(props, context)
const onBtnClick = () => {
console.log('點擊按鈕測試', props.msg)
}
return () => (
<div class={NAME}>
<h1>yyg-demo-ui Foo</h1>
<p class={NAME + '__description'}>msg is: { props.msg }</p>
<el-button type='primary' onClick={onBtnClick}>點擊我</el-button>
</div>
)
}
})
該組件僅簡單展示文本和 Element Plus 的按鈕，用於測試。
2.5 定義 foo 組件入口文件
foo/index.ts ：
import { App } from 'vue'
import Foo from './src'
Foo.install = (app: App) => {
app.component(Foo.name, Foo)
}
export default Foo
該文件將組件導入並導出，並且為該組件提供 install 方法。這樣便完成了 foo 組件的代碼編寫。
3 實現 yyg-demo-ui
完成 foo 示例組件後，就需要開始開發組件庫入口 yyg-demo-ui 了。第一步仍是初始化 package.json
3.1 初始化 package.json
在命令行中進入 packages/yyg-demo-ui 目錄：
pnpm init
同上修改生成的 package.json 文件的 name 屬性：
{
"name": "@yyg-demo-ui/yyg-demo-ui",
"version": "1.0.0",
"description": "組件庫入口",
"author": "程式員優雅哥 youyacoder",
"main": "index.ts",
...
}
3.2 安裝依賴
foo 和 yyg-demo-ui 都是獨立的包，yyg-demo-ui 需要安裝 foo 到依賴中，才能引入 foo 組件。在 2.1 中將 foo 的 package.json name 屬性修改為 @yyg-demo-ui/foo，安裝時要使用該名稱。從控制臺中進入 packages/yyg-demo-ui ，執行命令：
pnpm install @yyg-demo-ui/foo
此時查看 packages/yyg-demo-ui/package.json 的 dependencies，會看到使用 workspace協議依賴了 foo
"dependencies": {
"@yyg-demo-ui/foo": "workspace:^1.0.0"
}
同時在 node_modules 中也可以看到多了一個 @yyg-demo-ui/foo：
3.3 定義入口文件
在 packages/yyg-demo-ui 下創建 index.ts，導入組件並導出：
import { App } from 'vue'
import Foo from '@yyg-demo-ui/foo'
// import component end
import '../scss/index.scss'
const components = [
Foo
] // components
// 全局動態添加組件
const install = (app: App): void => {
components.forEach(component => {
app.component(component.name, component)
})
}
export default {
install
}
到這裡咱們基本完成了組件的開發環境搭建，但遺留了三個問題：
- 組件及組件庫的樣式定義
- 如何查看組件的效果
- 組件庫如何構建打包發佈
這些問題在後面的文章中會依次解答。下一篇文章將分享組件庫的 CSS 架構和 example 搭建。
感謝你閱讀本文，如果本文給了你一點點幫助或者啟發，還請三連支持一下，點贊、關註、收藏，程式員優雅哥會持續與大家分享更多乾貨
