# design

**Repository Path**: memory_s/design

## Basic Information

- **Project Name**: design
- **Description**: 组件库模板代码
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-24
- **Last Updated**: 2025-12-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Design 组件库框架

#### 贡献

1.  Fork 本仓库
2.  新建 feat/xxx 分支
3.  Push代码，并提交 Merge Request, 作者欢迎各位为此开源项目贡献一份力量~

## 介绍

一款在基于 Vite 构建工具下的组件库基础框架，支持：md 编写组件、组件 hmr 修改同步等基础功能，内置 Web 站点。采用 pnpm 的 monorepo 实现包管理。构建后的组件支持按需导入及全局导入。

当前库有以下几个模块：

- site
    - Web站点：Web组件的展示网页，含：快速上手、组件全览、DemoBlock 等示例展示。
- design
    - 组件库核心：组件库核心代码，含：组件源码等。
- @design/common
    - 扩展库：组件库打包时的公共函数。
- @design/plugins
    - 扩展库：组件库打包时所需的vite、esbuild 插件等。

## 前置准备

Node版本 >= 20

## 项目启动

开发模式启动

```sh
    ## 启动前，会先打包 plugins、common后启动web站点
    pnpm dev
```

生产模式预览

```sh
    ## 构建前，会先打包 plugins、common、design组件库后启动web站点
    pnpm build
```

## 核心目录简介

- docs

    - web站点内容：可在此处编写web站点，通过 md + nav.json(导航目录) 实现站点内容的编辑。示例内容如下。

    ````
        ## Button 按钮

        #### 基础用法

        代码块后面跟上 vue 的代码会被demo-block 组件识别并渲染这个示例
        ```vue
        <template>
            <Button type="primary">主要按钮123</Button>
        </template>

        <script setup>
        import { ref } from "vue";
        </script>
        ```
    ````

- packages/design/component
    - 组件核心代码：可在此目录下，按照示例的三个组件及文件命名，来实现组件的自定义编写。

## 文档地址

[详细使用手册](https://github.com/vanner-young/vite-electron-simple/tree/master/packages/core)