组件库

自己的 vue3 组件库

安装

pnpm add @yisword/components
pnpm add @yisword/resolver -D
pnpm add unplugin-vue-components -D

自动引入 + 类型提示

1. Vite 配置

import Components from 'unplugin-vue-components/vite'
import { SwordResolver } from '@yisword/resolver'

export default defineConfig({
  plugins: [
    Components({
      dts: true,
      resolvers: [SwordResolver()],
    }),
  ],
})

2. TypeScript 配置

tsconfig.app.json 需包含插件生成的声明文件：

{
  "include": ["src/**/*.vue", "src/**/*.ts", "components.d.ts", "env.d.ts"]
}

env.d.ts 中增加：

/// <reference types="@yisword/components/global" />

3. 类型导入（统一从包根路径）

所有对外类型均从 @yisword/components 导入，无需再写子路径：

import type {
  // table
  ColumnProps,
  ProTableProps,
  ProTableInstance,
  HeaderRenderScope,
  PageConfig,
  // search
  TableSearchProps,
  SearchInstance,
  // grid
  GridProps,
  BreakPoint,
  Responsive,
  // dialog
  DialogProps,
  TitleType,
  DialogInstance,
  // input
  InputProps,
  InputEmits,
  // hooks 命名空间
  Table,
  HandleData,
} from '@yisword/components'

// 命名空间成员
type Pageable = Table.Pageable
type MessageType = HandleData.MessageType

// 枚举（值 + 类型）
import { TitleEnum } from '@yisword/components'

全量注册

import SwordComponents from '@yisword/components'
import '@yisword/components/style'

app.use(SwordComponents)