star-ui-library

基于Uniapp的Vue2组件库

项目介绍

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

特性

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

快速开始

安装

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

使用

// 全局引入
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 按钮

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

Input 输入框

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

Uni-app 特别说明

在 Uni-app 中使用

1. 全局引入（推荐）：

在 main.js 中：

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. 按需引入：

<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. 直接引入组件：

<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/              # 文档

开发命令

# 安装依赖
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包

# 执行构建脚本
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字段：

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

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

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

5. 登录npm账号

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

npm login

6. 发布npm包

npm publish --access=public

7. 验证发布结果

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

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

注意事项

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

License

MIT