开发组件

生成组件模板

通过执行gen脚本可以生成组件模板。

pnpm gen <component-name>

提示

Windows系统无法直接执行.sh脚本，可以直接使用git bash执行或者安装Windows Subsystem for Linux (WSL)。

命令执行成功后将生成相应的模板文件。

.
├─ packages
│  ├─ components  // 组件库
│  │  └─ <component-name>  // 组件目录 // [!code ++]
│  │     ├─ src   // 源代码 // [!code ++]
│  │     │   ├─ <component-name>.ts  // 类型定义 // [!code ++]
│  │     │   └─ <component-name>.vue // 组件文件 // [!code ++]
│  │     ├─ style // 样式文件 // [!code ++]
│  │     │   ├─ css.ts   // css样式导入 // [!code ++]
│  │     │   └─ index.ts // scss样式导入 // [!code ++]
│  │     └─ index.ts  // 入口文件 // [!code ++]
│  └─ theme-chalk // 样式库
│     └─ src   // 源代码
│        └─ <component-name>.scss   // 组件样式 // [!code ++]
└─ others  // 其他文件...

导出组件

组件开发完成后需要在packages/components/index.ts和packages/liv-web/components.ts文件中统一导出组件。

在packages/components/index.ts文件中添加以下代码：

// others components ...
export * from './component-name'; 

在packages/liv-web/components.ts文件中添加以下代码：

// others components ...
import { LivComponentName } from '@liv-web/components/component-name'; 

import type { Plugin } from 'vue';

export default [
  // others components ...
  LivComponentName, 
] as Plugin[];

导出样式

为了在使用完整引入时提供全量样式文件，组件的样式需要在packages/theme-chalk/src/index.scss文件中统一导出。

// others scss ...
@use './component-name.scss'; 

全局类型声明

为了在使用完整引入时提供完整的类型支持，组件需要在/typing/global.d.ts文件进行全局类型声明。

declare module 'vue' {
  // GlobalComponents for Volar
  export interface GlobalComponents {
    // others components ...
    LivComponentName: (typeof import('liv-web'))['LivComponentName']; 
  }
}

export {};