包管理器pnpm

.npmrc文件配置

shamefully-hoist=true

来提升依赖到全局方面源代码引用幽灵依赖

打包

组件库采用vite打包、工具包可采用tsup

TIP

组件库打包TS声明文件自动生成

 {
    "build": "vite build && tsc --project tsconfig.app.json"
  },

样式bem规范

旨在解决大型项目中样式冲突、可维护性差和协作效率低的问题

命名规则

block 代码块+element元素+modifier装饰+状态

1. block用-
2. Element 用__
3. Modifier 用--
4. 状态用is-

z-button__element--disabled is-checked

优势如下

• 样式隔离
• 高可读性
• 易维护性
• 团队协作友好

scss的bem规范

config.scss

$namespace:'z';
$element-separator: '__';
$modifier-separator: '--';
$status-prefix: 'is-';

mixins.scss

@use 'config' as *;
@forward "config";

@mixin b($block){
    $B: $namespace+'-'+$block;
    .#{$B} {
        @content;
    }
}

@mixin when($status){
    @at-root{
        &.#{$status-prefix+$status} {
            @content;
        }
    }
}

@mixin m($modifier){
    @at-root{
       #{&+$modifier-separator+$modifier} {
            @content;
        }
    }
}

@mixin e($element){
    @at-root{
       #{&+$element-separator+$element} {
            @content;
        }
    }
}

组件开发

原则： 简单组件直接使用模版开发，复杂组件需要jsx语法

组件属性类型定义

import {ExtractPropTypes, PropType} from "vue"
export const iconProps = {
    color:String,
    size:[Number,String] as PropType<string | number>,
} as const
export type IconProps = ExtractPropTypes<typeof iconProps>

组件插件定义

import {DefineComponent,App,Plugin} from "vue"
export type SFCWithInstall=DefineComponent<{}, {}, any>  & Plugin

export const withInstall=(component:DefineComponent<{}, {}, any>)=>{
    (component as SFCWithInstall).install = (app: App) => {
        app.component(component.name!, component);
    };
    return component as SFCWithInstall
}

全局组件类型定义

declare module 'vue' {
    export interface GlobalComponents {
        ZIcon: typeof ZIcon
    }
}

组件库文档

vitepress

图标组件

xicons图标库

面试

1. 组件库架构，pnpm+monorepo
2. 子包组成，组件库包+样式包+工具包+文档包
3. 组件开发：简单的使用模版语法，复杂的使用tsx，每个组件都支持插件安装
4. 样式编写：采用bem规范，起到样式隔离，和良好的可维护性
5. 打包，采用vite/rollup打包
6. 良好的typescript支持