npm package: @star-ai/star-ui
Description: 基于Uniapp的Vue2组件库
Author: DengChengBo
Latest version: 0.1.18

# star-ui-library

基于Uniapp的Vue2组件库

## 项目介绍

star-ui-library是一个基于Uniapp和Vue2开发的移动端组件库，提供了丰富的UI组件，帮助开发者快速构建美观、易用的移动应用。

## 特性

- 🎨 基于Uniapp和Vue2，支持多端编译
- 📱 丰富的移动端UI组件
- 🔧 支持按需引入
- 📦 轻量、高效

## 快速开始

### 安装

```bash
npm install @star-ai/star-ui
pnpm add @star-ai/star-ui
```

### 使用

```javascript
// 全局引入
import StarUI from '@star-ai/star-ui'
import '@star-ai/star-ui/lib/styles/index.scss'

Vue.use(StarUI)

// 按需引入
import { StarButton, StarInput } from '@star-ai/star-ui'
import '@star-ai/star-ui/lib/styles/index.scss'

Vue.use(StarButton)
Vue.use(StarInput)
```

## 组件文档

### Button 按钮

```vue
<star-button type="primary">主要按钮</star-button>
```

### Input 输入框

```vue
<star-input v-model="value" placeholder="请输入内容"></star-input>
```

## Uni-app 特别说明

### 在 Uni-app 中使用

1. **全局引入（推荐）**：

在 `main.js` 中：
```javascript
import Vue from 'vue'
import App from './App'
import StarUI from '@star-ai/star-ui'
import '@star-ai/star-ui/lib/styles/index.scss'

Vue.use(StarUI)

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()
```

2. **按需引入**：

```vue
<template>
  <view>
    <star-button type="primary">按钮</star-button>
    <star-input v-model="value"></star-input>
  </view>
</template>

<script>
import { StarButton, StarInput } from '@star-ai/star-ui'

export default {
  components: {
    StarButton,
    StarInput
  },
  data() {
    return {
      value: ''
    }
  }
}
</script>

<style>
/* 引入全局样式 */
@import '@star-ai/star-ui/lib/styles/index.scss';
</style>
```

3. **直接引入组件**：

```vue
<template>
  <view>
    <star-button type="primary">按钮</star-button>
  </view>
</template>

<script>
import StarButton from '@star-ai/star-ui/lib/components/Button/Button.vue'

export default {
  components: {
    StarButton
  }
}
</script>
```

### 注意事项

1. **组件名称**：所有组件以 `star-` 为前缀，如 `star-button`、`star-input`
2. **样式引入**：确保引入了组件库的样式文件
3. **Vue 版本**：组件库基于 Vue 2.x 开发，与 Uni-app 保持兼容
4. **编译平台**：支持 H5、小程序、App 等多端编译

## 开发指南

### 项目结构

```
├── packages/          # 组件源码
│   ├── components/    # 组件目录
│   ├── styles/        # 样式文件
│   └── index.js       # 入口文件
├── lib/               # 构建后的npm包
├── examples/          # 示例代码
├── build/             # 构建脚本
└── docs/              # 文档
```

### 开发命令

```bash
# 安装依赖
yarn install

# 启动H5开发服务器
npm run dev:h5

# 构建H5版本
npm run build:h5

# 构建小程序版本
npm run build:mp-weixin

# 构建App版本
npm run build:app-plus

# 构建npm包
npm run build:lib
```

## npm包发布流程

### 1. 准备工作

确保你已经：
- 拥有npm账号并已登录
- 确保package.json中的配置正确
- 已完成代码开发和测试

### 2. 构建npm包

```bash
# 执行构建脚本
npm run build:lib
```

此命令会执行以下操作：
- 清空lib目录
- 复制所有组件到lib/components
- 为每个组件创建单独的index.js入口文件
- 复制样式文件到lib/styles
- 创建主入口文件lib/index.js

### 3. 检查构建结果

构建完成后，检查lib目录是否包含以下内容：
- lib/index.js          # 主入口文件
- lib/components/       # 组件目录
- lib/styles/           # 样式文件

### 4. 更新版本号

根据语义化版本规则更新package.json中的version字段：

```bash
# 补丁版本(修复bug)
npm version patch

# 小版本(新增功能)
npm version minor

# 大版本(不兼容更改)
npm version major
```

### 5. 登录npm账号

如果尚未登录npm账号，执行以下命令登录：

```bash
npm login
```

### 6. 发布npm包

```bash
npm publish --access=public
```

### 7. 验证发布结果

发布成功后，可以在npm官网查看你的包：

```
https://www.npmjs.com/package/@star-ai/star-ui
```

## 注意事项

- 发布前请确保所有测试通过
- 发布前请检查package.json中的配置是否正确
- 每次发布请更新版本号
- 如果是私有包，请移除--access public参数

## License

MIT