组件库

技术栈：React + TypeScript + scss + Vite + tailwindcss + shadcn-ui

组件库使用说明

pnpm install lq-design

主入口文件引入css样式

后续考虑css分包处理,按需加载

//主入口文件
import "lq-design/es/src/index.css";

组件引入使用

import { Button } from 'lq-design';

export const Demo = () => {
  return (
    <div>
      <Button />
    </div>
  )
}

项目运行

node版本 v20.12.2

包管理工具 [email protected]

直接安装pnpm即可，版本号是以防后续出现版本问题方便追踪

# 依赖安装
pnpm install

# 启动本地开发服务，通过storybook预览组件
pnpm run dev

# 组件库描述文档打包
pnpm run build-storybook

# 组件库打包
pnpm run build

如何在前端项目中使用本地组件库项目

# 1. 将当前组件库代码链接到全局(无法使用npm link添加到pnpm项目中)
npm link

# 2. 在需要使用组件库的前端项目中使用以下命令进行安装, 完成后会被安装到node_modules
npm link lq-design

# 如果是pnpm包管理器，使用以下方式
# 1. 链接当前项目到全局node_module
pnpm link --global
# 2. 将全局中组件库链接到当前项目
pnpm link --global lq-design

本地开发预览方法、组件文档维护

1. pnpm run dev 启动storybook文档
2. 在src/stories下创建文件 [组件名].stories.ts
3. 根据storybook文档语法引用组件，类似于以下代码
4. storybook文档语法具体参照storybook官方文档 https://storybook.js.org/docs

import type { Meta, StoryObj } from '@storybook/react'
import { fn } from '@storybook/test'
import { Demo } from '@/components/Demo'

const meta = {
  title: 'Example/Demo',
  component: Demo,
  parameters: {
    layout: 'centered'
  },
  tags: ['autodocs'],
  argTypes: {
    color: {
      control: 'color'
    }
  },
  args: { title: 'demo', onClick: fn() }
} satisfies Meta<typeof Demo>

export default meta
type Story = StoryObj<typeof meta>

export const Primary: Story = {
  args: {
    title: 'demo',
    onClick: fn()
  }
}