快速开始

介绍

MSCPore Vue 是一个基于 Vue3 的组件库和工具集项目，包含以下几个部分：

• UI 组件库：提供常用的 UI 组件
• 工具函数：提供常用的工具函数
• Hooks：提供可复用的组合式函数
• Directives：提供常用的指令

构建方式

项目提供两条构建入口：

• pnpm build：通过 Turborepo 调度各包自身的构建任务，产物保留在各包的 dist 目录。
• pnpm build:gulp：通过 build/gulpfile.ts 聚合构建 ui、utils、hooks、directives，产物统一输出到根目录 dist/<包名>。

基础包使用 Rolldown 构建，UI 包使用 tsdown 构建，配置文件统一使用 TypeScript。

安装

使用包管理器安装：

npm

npm install @mscpore-vue/ui @mscpore-vue/utils @mscpore-vue/hooks @mscpore-vue/directives

yarn

yarn add @mscpore-vue/ui @mscpore-vue/utils @mscpore-vue/hooks @mscpore-vue/directives

pnpm

pnpm add @mscpore-vue/ui @mscpore-vue/utils @mscpore-vue/hooks @mscpore-vue/directives

bun

bun add @mscpore-vue/ui @mscpore-vue/utils @mscpore-vue/hooks @mscpore-vue/directives

使用

UI 组件

// 全局引入
import { createApp } from 'vue';
import UI from '@mscpore-vue/ui';
import '@mscpore-vue/ui/style.css';
const app = createApp(App);
app.use(UI);
//  tsconfig.json 还需要添加以下配置以获得类型提示：
//  "types": ["@mscpore-vue/ui/global.d.ts"]

// 按需引入
import { Button } from '@mscpore-vue/ui';
import '@mscpore-vue/ui/style.css';
const app = createApp(App);
app.use(Button);

工具函数

import { isString } from '@mscpore-vue/utils';
console.log(isString('hello')); // true

Hooks

import { useCounter } from '@mscpore-vue/hooks';
const { count, increment, decrement } = useCounter();

指令

import { vFocus } from '@mscpore-vue/directives';
// 全局引入
app.directive('focus', vFocus);

// 按需引入
import { vFocus } from '@mscpore-vue/directives';
app.directive('focus', vFocus);