# zz-form-create-ui

**Repository Path**: zzbaby/zz-form-create-ui

## Basic Information

- **Project Name**: zz-form-create-ui
- **Description**: 1.使用vite打包在npm上发布自定义组件库; 2.使用gulp自动化处理打包与发布;3.成功在npm上发布button和icon案例；
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-07
- **Last Updated**: 2024-11-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# zz-form-create-ui

此项目目前只开发了一个 button 组件和 icon 组件, 做演示 .

#### 介绍

随着前端技术的发展，业界涌现出了许多的 UI 组件库。例如我们熟知的 ElementUI,Vant，AntDesign 等等。但是作为一个前端开发者，你知道一个 UI 组件库是如何被打造出来的吗?

此项目将实现:

- 使用 pnpm 搭建出一个 Monorepo 环境
- 使用 vite 搭建一个基本的 Vue3 脚手架项目
- 开发调试一个自己的 UI 组件库
- 使用 vite 打包并发布自己的 UI 组件库

最后使用 vite 来对组件库进行打包并且发布到 npm 上。最终的产物是一个名为`zz-form-create-ui`的组件库。

此项目目前只开发了一个 button 组件 , 做演示 .

#### 参考资料

- 使用 Vite 和 TypeScript 带你从零打造一个属于自己的 Vue3 组件库：
  https://juejin.cn/post/7117886038126624805#comment
- 用 gulp 自动化处理打包与发布 ：
  https://juejin.cn/post/7126493560190271525

#### 软件架构

└─ docs # 项目开发过程中的文档记录

└─ examples # 新项目,目的是测试组件的案例

└─ node_modules # 依赖包

└─ packages # 存放编写的组件

#### 使用说明

- pnpm install # 安装依赖包
- npm run examples:dev# 运行项目查看案例
- npm run build:com # 打包
- publish:com # 发布

#### 安装教程

1.  pnpm install zz-form-create-ui

#### node 版本要求

node >= 18.12