Vue3 企業級優雅實戰 - 組件庫框架 - 3 搭建組件庫開發環境-有解無憂

前文已經初始化了 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 搭建，

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/531856.html

標籤：其他

上一篇：vue中組件化編程

下一篇：在線客服系統原始碼開發實戰總結：需求分析及前端代碼基本技術方案