Lime UI官网使用入口，一款基于uniapp的移动端组件库

Lime UI是基于Vue3 Composition API（Setup 语法）构建、深度适配UniApp/UniAppX生态的轻量高效跨平台UI组件库，主打“轻量、多端、灵活、高效”，提供65+免费组件、25+付费组件及26+原生增强插件，可快速搭建专业级多端应用，曾获2025插件大赛一等奖。

Lime UI平台核心特点：

1、深度兼容UniApp生态，一套代码全端覆盖：

完美适配UniApp/UniAppX，支持微信/支付宝/抖音小程序、H5、App（iOS/Android）、鸿蒙Next等多端，真正实现“一次开发、多端运行”。

自动抹平各平台渲染与样式差异，无需为不同端单独适配，大幅降低跨端开发成本。

2、轻量高效，性能与体积双优：

基于Composition API构建，代码简洁、逻辑复用性强，渲染性能优异。

支持Tree-Shaking按需引入，仅打包项目所需组件，最小化应用体积，提升加载与运行速度。

底层优化渲染逻辑，适配移动端高并发场景，交互流畅无卡顿。

3、组件丰富，覆盖全场景开发需求：

提供基础组件（按钮、布局、图标）、表单组件（输入框、选择器、开关）、导航组件（标签栏、侧边栏）、反馈组件（弹窗、加载）、高级组件（日历、大转盘、图表）等90+组件。

内置26+原生插件（如海报画板、图片裁剪、写字板、ECharts图表），直接调用原生能力，无需额外开发。

4、主题灵活，支持动态定制与暗黑模式：

内置CSS变量系统，可一键修改全局主题色、字体、间距等样式，快速适配品牌视觉。

原生支持暗黑模式，无需额外开发，一键切换明暗主题，提升用户体验。

5、原生增强，性能与能力双升级：

集成高性能原生插件，突破Web层性能瓶颈，实现更流畅的动画、更高效的图表渲染、更精准的交互。

支持App-nvue原生渲染，在App端获得接近原生的性能体验。

6、持续迭代，生态完善：

活跃维护更新，定期新增组件与功能，兼容UniApp最新版本。

提供完整文档、示例代码与官方交流群，问题响应及时，开发体验友好。

Lime UI典型应用场景：

1、多端小程序矩阵开发：

同时开发微信、支付宝、抖音、百度等多平台小程序，一套代码同步上线，快速覆盖全渠道流量。

适合电商、本地生活、资讯、工具类等需要多小程序并行运营的项目。

2、跨端应用（小程序+H5+App+鸿蒙）：

一次开发，同时发布小程序、H5、iOS/Android App、鸿蒙Next应用，实现全终端覆盖。

适合工具类、服务类、企业级应用，降低多端开发与维护成本。

3、电商零售应用：

快速搭建商品列表、购物车、结算、SKU选择、地址管理、订单中心、营销活动（大转盘、抽奖）等核心界面。

适配零售、生鲜、美妆、服装等电商场景，支持直播、分销、优惠券等营销能力。

4、工具/服务类轻应用：

适用于表单提交、查询、预约、打卡、扫码、数据展示、海报生成、图片处理等轻量工具场景。

包体积小、加载快、交互高效，适合高频使用的工具类项目。

5、企业/政务类应用：

构建统一规范的内部管理、办事服务、数据看板、信息公示界面，满足合规性与视觉一致性要求。

表单、表格、审批流、图表等组件成熟，适配企业级复杂业务场景。

6、营销活动应用：

快速搭建抽奖、限时优惠、新品发布、报名登记、投票等活动页面，支持裂变传播与数据统计。

原生大转盘、海报生成等组件，助力营销转化与用户增长。

Lime UI典型案例教程：

安装 echarts

pnpm add echarts
 -or-
npm install echarts

基础用法：

<view style="width: 100%; height:500rpx"><l-echart ref="chart"></l-echart></view>

——————————————————————

// 引入全量包
import * as echarts from 'echarts'
//---or----------------------------------

// 或者按需引入 
import * as echarts from 'echarts/core';
import {LineChart, barChart} from 'echarts/charts';
import {TitleComponent,TooltipComponent,GridComponent, DatasetComponent, TransformComponent, LegendComponent } from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import {LabelLayout,UniversalTransition} from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 是必须的一步
import {CanvasRenderer} from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  LegendComponent,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LineChart,
  barChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
//-------------------------------------
export default {
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow' 
          },
          confine: true
        },
        legend: {
          data: ['热度', '正面', '负面']
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 15,
          top: 40,
          containLabel: true
        },
        xAxis: [
          {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#999999'
              }
            },
            axisLabel: {
              color: '#666666'
            }
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['汽车之家', '今日头条', '百度贴吧', '一点资讯', '微信', '微博', '知乎'],
            axisLine: {
              lineStyle: {
                color: '#999999'
              }
            },
            axisLabel: {
              color: '#666666'
            }
          }
        ],
        series: [
          {
            name: '热度',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: [300, 270, 340, 344, 300, 320, 310],
          },
          {
            name: '正面',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true
              }
            },
            data: [120, 102, 141, 174, 190, 250, 220]
          },
          {
            name: '负面',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'left'
              }
            },
            data: [-20, -32, -21, -34, -90, -130, -110]
          }
        ]
      },
    };
  },
  mounted() {
    // 把 echarts 传入 
    this.$refs.chart.init(echarts, chart => {
      chart.setOption(this.option);
    });
  }
}

数据更新：