Vue3 企業級優雅實戰 – 組件庫框架 – 3 搭建組件庫開發環境

前文已經初始化了 workspace-root,從本文開始就需要依次搭建組件庫、example、文檔、cli。本文內容是搭建 組件庫的開發環境。

1 packages 目錄

前面在項目根目錄下創建了 packages 目錄,該目錄存放組件庫的所有組件組件庫的入口。該目錄中已經創建了兩個子目錄 fooyyg-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 目錄:

  1. 創建 index.ts 文件,該文件為組件的入口文件:
touch index.ts
  1. 創建 src 目錄,該目錄存放組件的實現源碼。在 foo/src/ 中創建 index.tsxtypes.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 安裝依賴

fooyyg-demo-ui 都是獨立的包,yyg-demo-ui 需要安裝 foo 到依賴中,才能引入 foo 組件。在 2.1 中將 foopackage.json name 屬性修改為 @yyg-demo-ui/foo,安裝時要使用該名稱。從控制台中進入 packages/yyg-demo-ui ,執行命令:

pnpm install @yyg-demo-ui/foo

此時查看 packages/yyg-demo-ui/package.jsondependencies,會看到使用 workspace協議依賴了 foo

"dependencies": {
  "@yyg-demo-ui/foo": "workspace:^1.0.0"
}

同時在 node_modules 中也可以看到多了一個 @yyg-demo-ui/foo

image-20221105001615752

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
}

到這裡咱們基本完成了組件的開發環境搭建,但遺留了三個問題:

  1. 組件及組件庫的樣式定義
  2. 如何查看組件的效果
  3. 組件庫如何構建打包發布

這些問題在後面的文章中會依次解答。下一篇文章將分享組件庫的 CSS 架構和 example 搭建。

感謝你閱讀本文,如果本文給了你一點點幫助或者啟發,還請三連支援一下,點贊、關注、收藏,程式設計師優雅哥會持續與大家分享更多乾貨