@yh-kit/vue-materials

@yh-kit/vue-materials

Vue3 物料库，封装了基于 Vue 3 + TypeScript 的常用布局组件与 UI 组件，开箱即用。

组件一览

安装

pnpm install @yh-kit/vue-materials
# or
npm install @yh-kit/vue-materials
# or
yarn add @yh-kit/vue-materials

import { AdminLayout } from '@yh-kit/vue-materials'

使用文档

各组件的详细使用文档位于 docs/use/ 目录：

# 安装本包后，直接查看组件使用文档（以 MtIcon 为例）
cat node_modules/@yh-kit/vue-materials/docs/use/ui/MtIcon.MD

各组件文档顶部提供「返回总览」入口，可与本页双向跳转。

使用组件

按需自动导入组件

需要安装 unplugin-vue-components 插件，用于按需自动导入组件。

然后在 vite.config.ts 中配置插件：

import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    Components({
      // 配置你的物料库作为自定义组件库
      resolvers: [
        (name: string) => {
          // 如果组件名以 Mt 开头，从物料库中导入
          if (name.startsWith("Mt") || name.endsWith("Layout")) {
            return {
              name,
              from: "../libs"
            };
          }
        }
      ]
    })
  ],
})

页面使用组件

<template>
  <AdminLayout />
  <BlankLayout />
  <mt-button />
  <mt-test />
  <mt-icon icon-name="icon-copy" />
</template>

全局使用 app.component 注册组件

在 main.ts 中注册组件

import { createApp } from 'vue'
import App from './App.vue'
import { AdminLayout, BlankLayout, MtButton, MtTest, MtIcon } from '@yh-kit/vue-materials'

const app = createApp(App)

app.component("AdminLayout", AdminLayout);
app.component("BlankLayout", BlankLayout);
app.component("MtButton", MtButton);
app.component("MtTest", MtTest);
app.component("MtIcon", MtIcon);

app.mount('#app')

在 App.vue 中使用组件

<template>
  <AdminLayout />
  <BlankLayout />
  <mt-button />
  <mt-test />
  <mt-icon icon-name="icon-copy" />
</template>

参考

• 开发 vue3 UI 组件库，并且发布到 NPM
• Vue3+TS+Vite 开发组件库并发布到 npm

仓库

Gitee 仓库（monorepo，本包位于 packages/vue3-materials）