乐趣区

关于前端:Vue3-企业级优雅实战-组件库框架-3-搭建组件库开发环境

jiezi

前文曾经初始化了 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 目录：

  1. 创立 index.ts 文件，该文件为组件的入口文件：
touch index.ts
  1. 创立 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}

到这里咱们根本实现了组件的开发环境搭建，但遗留了三个问题：

  1. 组件及组件库的款式定义
  2. 如何查看组件的成果
  3. 组件库如何构建打包公布

这些问题在前面的文章中会顺次解答。下一篇文章将分享组件库的 CSS 架构和 example 搭建。

退出移动版