Quick Start

Introduction

MSCPore Vue is a component library and toolkit project based on Vue3, consisting of the following parts:

• UI Component Library: Provides commonly used UI components
• Utility Functions: Offers common utility functions
• Hooks: Provides reusable composable functions
• Directives: Offers commonly used directives

Build Modes

The project provides two build entries:

• pnpm build: uses Turborepo to run each package's own build task and keeps output in each package's dist directory.
• pnpm build:gulp: runs build/gulpfile.ts to aggregate ui, utils, hooks, and directives into root dist/<package>.

Base packages are built with Rolldown, the UI package is built with tsdown, and build configuration files use TypeScript.

Installation

Install using a package manager:

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

Usage

UI Components

// Global import
import { createApp } from 'vue';
import UI from '@mscpore-vue/ui';
import '@mscpore-vue/ui/style.css';
const app = createApp(App);
app.use(UI);
// Additionally, add the following configuration to tsconfig.json for type hints:
// "types": ["@mscpore-vue/ui/global.d.ts"]

// Import on demand
import { Button } from '@mscpore-vue/ui';
import '@mscpore-vue/ui/style.css';
const app = createApp(App);
app.use(Button);

Utility Functions

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

Hooks

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

Directives

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

// Import on demand
import { vFocus } from '@mscpore-vue/directives';
app.directive('focus', vFocus);