前文已經(jīng)初始化了 workspace-root，從本文開(kāi)始就需要依次搭建組件庫(kù)、example、文檔、cli。本文內(nèi)容是搭建 組件庫(kù)的開(kāi)發(fā)環(huán)境。

1 packages 目錄

前面在項(xiàng)目根目錄下創(chuàng)建了 packages 目錄，該目錄存放組件庫(kù)的所有組件及組件庫(kù)的入口。該目錄中已經(jīng)創(chuàng)建了兩個(gè)子目錄 foo 和 yyg-demo-ui。這兩個(gè)目錄是干嘛用的呢？

1.1 foo 目錄

foo 目錄代表一個(gè)示例組件，后面咱們會(huì)使用該組件來(lái)測(cè)試組件庫(kù)在 example 和組件庫(kù)文檔中是否能正常運(yùn)行。后續(xù)要開(kāi)發(fā)的所有組件（如高級(jí)卡片組件、JSON Schema 表單組件等）都與 foo 組件的文件目錄結(jié)構(gòu)保持一致。

1.2 yyg-demo-ui 目錄

該目錄與整個(gè)組件庫(kù)工程的名稱相同，所以你本地的這個(gè)目錄不一定叫這個(gè)名稱。該目錄是組件庫(kù)的入口模塊，該模塊會(huì)安裝組件庫(kù)的所有組件（即 packages 目錄下的其他包）作為依賴，并引入全部組件，統(tǒng)一暴露。此外還是打包組件庫(kù)的入口?？梢詫⑺斫鉃榻M件庫(kù)的聚合模塊。

2 實(shí)現(xiàn) foo 示例組件

2.1 初始化 package.json

foo 目錄存放示例組件，它也是一個(gè)包，所以需要在命令行中進(jìn)入 packages/foo 目錄，使用 pnpm 初始化：

pnpm init

修改生成的 package.json 中的 name 屬性值為 foo，在 monorepo 中，子包的 name 屬性通常會(huì)命名為 @組織名/foo，由于咱是個(gè)組件庫(kù)，可以將其命名為 @組件庫(kù)名/foo，即 @yyg-demo-ui/foo。我修改了 package.json 的下面幾個(gè)屬性：

{
  "name": "@yyg-demo-ui/foo",
  "version": "1.0.0",
  "description": "示例組件",
  "author": "程序員優(yōu)雅哥 youyacoder",
  "main": "index.ts",
...
}

2.2 初始化 foo 目錄結(jié)構(gòu)

在命令行中進(jìn)入 foo 目錄：

• 創(chuàng)建 index.ts 文件，該文件為組件的入口文件：

touch index.ts

• 創(chuàng)建 src 目錄，該目錄存放組件的實(shí)現(xiàn)源碼。在 foo/src/ 中創(chuàng)建 index.tsx 和 types.ts，前者是組件的具體實(shí)現(xiàn)，后者是組件的 props 定義及類(lèi)型：

mkdir src
touch src/index.tsx src/types.ts

如此一來(lái)，示例組件 foo 的目錄結(jié)構(gòu)便創(chuàng)建完成，目錄結(jié)構(gòu)如下：

packages/
|- foo/
		|- index.ts
		|- src/
				|- index.ts
				|- types.ts
|- yyg-demo-ui/

2.3 定義 foo 組件的 props

在 foo/src/types.ts 中定義 foo 組件的 props，并提取其類(lèi)型：

import { ExtractPropTypes } from 'vue'

export const fooProps = {
  msg: {
    type: String,
    required: false,
    default: ''
  }
}
export type FooProps = ExtractPropTypes<typeof fooProps>

上面的代碼定義了一個(gè)非必填的屬性 msg，并使用 vue 中提供的 ExtractPropTypes 提取 props 的類(lèi)型。

2.4 實(shí)現(xiàn) foo 組件

在 foo/src/index.tsx 中實(shí)現(xiàn) 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('點(diǎn)擊按鈕測(cè)試', 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}>點(diǎn)擊我</el-button>
      </div>
    )
  }
})

該組件僅簡(jiǎn)單展示文本和 Element Plus 的按鈕，用于測(cè)試。

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

該文件將組件導(dǎo)入并導(dǎo)出，并且為該組件提供 install 方法。這樣便完成了 foo 組件的代碼編寫(xiě)。

3 實(shí)現(xiàn) yyg-demo-ui

完成 foo 示例組件后，就需要開(kāi)始開(kāi)發(fā)組件庫(kù)入口 yyg-demo-ui 了。第一步仍是初始化 package.json

3.1 初始化 package.json

在命令行中進(jìn)入 packages/yyg-demo-ui 目錄：

pnpm init

同上修改生成的 package.json 文件的 name 屬性：

{
  "name": "@yyg-demo-ui/yyg-demo-ui",
  "version": "1.0.0",
  "description": "組件庫(kù)入口",
  "author": "程序員優(yōu)雅哥 youyacoder",
  "main": "index.ts",
  ...
}

3.2 安裝依賴

foo 和 yyg-demo-ui 都是獨(dú)立的包，yyg-demo-ui 需要安裝 foo 到依賴中，才能引入 foo 組件。在 2.1 中將 foo 的 package.json name 屬性修改為 @yyg-demo-ui/foo，安裝時(shí)要使用該名稱。從控制臺(tái)中進(jìn)入 packages/yyg-demo-ui ，執(zhí)行命令：

pnpm install @yyg-demo-ui/foo

此時(shí)查看 packages/yyg-demo-ui/package.json 的 dependencies，會(huì)看到使用 workspace協(xié)議依賴了 foo

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

同時(shí)在 node_modules 中也可以看到多了一個(gè) @yyg-demo-ui/foo：

3.3 定義入口文件

在 packages/yyg-demo-ui 下創(chuàng)建 index.ts，導(dǎo)入組件并導(dǎo)出：

import { App } from 'vue'
import Foo from '@yyg-demo-ui/foo'
// import component end
import '../scss/index.scss'

const components = [
  Foo
] // components

// 全局動(dòng)態(tài)添加組件
const install = (app: App): void => {
  components.forEach(component => {
    app.component(component.name, component)
  })
}

export default {
  install
}

到這里咱們基本完成了組件的開(kāi)發(fā)環(huán)境搭建，但遺留了三個(gè)問(wèn)題：

組件及組件庫(kù)的樣式定義

如何查看組件的效果

組件庫(kù)如何構(gòu)建打包發(fā)布

這些問(wèn)題在后面的文章中會(huì)依次解答。下一篇文章將分享組件庫(kù)的 CSS 架構(gòu)和 example 搭建。

到此這篇關(guān)于Vue3搭建組件庫(kù)開(kāi)發(fā)環(huán)境的文章就介紹到這了,更多相關(guān)vue組件庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論