# colorful-uni

**Repository Path**: anyup/colorful-uni

## Basic Information

- **Project Name**: colorful-uni
- **Description**: uni-app Vue2 + uView UI 1.x 多端快速开发工具库源码
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.anyup.cn
- **GVP Project**: No

## Statistics

- **Stars**: 24
- **Forks**: 7
- **Created**: 2021-06-03
- **Last Updated**: 2025-08-29

## Categories & Tags

**Categories**: uniapp

**Tags**: uni-app, template, Library, Vue

## README

<p align="center">
    <img alt="logo" src="https://ik.imagekit.io/anyup/images/social/site.png" width="120" style="margin-bottom: 10px;">
</p>

<h1 align="center">Colorful Uni App</h1>

<p align="center">简洁、高效的前端工程化框架库</p>

<p align="center">
  🔥 <a href="https://felabs.netlify.app/zh/colorful-uni/guide/introduce.html">在线文档网站</a>
</p>

### 介绍

Colorful Uni，是 uni-app 项目的最佳实践框架，包含最佳的组件实现和便捷的工具类封装。

## 特性

- 🚀 简洁至上，低代码开发的标准设计，开箱即用，自定义可扩展性

- ✅ 不断积累多个项目开发经验，迭代优化代码及引用资源，形成最佳实践并逐渐成为标准

## 安装

```bash
npm install colorful-uni
```

## 快速上手

1. main.js

```js
// 项目中最好使用Vuex Store，因为部分功能依赖
import store from './store';
import ColorfulUni from 'colorful-uni';
Vue.use(ColorfulUni, { store });
```

2. 在 uni.scss 自定义主题样式

如果你需要自定义主题样式，可引入 uni.scss 全局样式文件

```scss
@import 'colorful-uni/dist/theme.scss';
// 自定义主题颜色
$is-type-primary: #2979ff;
$is-type-primary-light: #ecf5ff;
$is-type-primary-disabled: #a0cfff;
$is-type-primary-dark: #2b85e4;

$is-type-warning: #ff9900;
$is-type-warning-disabled: #fcbd71;
$is-type-warning-dark: #f29100;
$is-type-warning-light: #fdf6ec;

$is-type-success: #19be6b;
$is-type-success-disabled: #71d5a1;
$is-type-success-dark: #18b566;
$is-type-success-light: #dbf1e1;

$is-type-error: #fa3534;
$is-type-error-disabled: #fab6b6;
$is-type-error-dark: #dd6161;
$is-type-error-light: #fef0f0;

$is-type-info: #909399;
$is-type-info-disabled: #c8c9cc;
$is-type-info-dark: #82848a;
$is-type-info-light: #f4f4f5;
// 其他颜色
$is-main-color: #303133;
$is-content-color: #606266;
$is-tips-color: #909399;
$is-light-color: #c0c4cc;
$is-border-color: #e4e7ed;
$is-bg-color: #f3f4f6;
$is-form-item-border-color: #dcdfe6;
$is-form-item-height: 70rpx;
```

3. 在 App.vue 中引入基础样式

```html
<style lang="scss">
@import 'colorful-uni/dist/index.scss';
</style>

```

Colorful Uni 支持按需引用、单独引用等方式，详细说明见 [快速上手](https://felabs.netlify.app/zh/colorful-uni/guide/quickstart.html).

## 开源项目

[Github：https://github.com/anyup/colorful-uni](https://github.com/anyup/colorful-uni)

[Gitee：https://gitee.com/anyup/colorful-uni](https://gitee.com/anyup/colorful-uni)


## 贡献代码

使用过程中发现任何问题都可以通过以下方式贡献代码：

Github 提 [Issue](https://github.com/anyup/colorful-uni/issues) ，也非常欢迎您发 [PR](https://github.com/anyup/colorful-uni/pulls)。

Gitee 提 [Issue](https://gitee.com/anyup/colorful-uni/issues) ，也非常欢迎您发 [PR](https://gitee.com/anyup/colorful-uni/pulls)。

## 浏览器支持

支持现代浏览器以及 Android >= 4.0、iOS >= 8.0。

## 手机预览

可以手机扫码以下二维码访问手机端 demo：

<table class="table">
    <tr>
        <td><img src="https://ik.imagekit.io/anyup/images/social/qr_wx.png" width="150" height="150" ></td>
	    <td><img src="https://ik.imagekit.io/anyup/images/social/qr_wx_youti.jpg" width="150" height="150" ></td>
	    <td><img src="https://ik.imagekit.io/anyup/images/social/qr_h5.png" width="150" height="150" ></td>
	    <td><img src="https://ik.imagekit.io/anyup/images/social/qr_android.png" width="150" height="150" ></td>
    </tr>
    <tr>
        <td align="center">示例小程序</td>
	    <td align="center">软考小程序</td>
	    <td align="center">H5</td>
	    <td align="center">Android</td>
    </tr>
</table>

## 开源协议

本项目基于 MIT 协议，请自由地享受和参与开源。