@zone-z/design

Zone 系列项目的业务 UI 组件库，基于 Vue 2.x 和 Element UI 构建。

简介

@zone-z/design 是专为 Zone 系列项目设计的 Vue UI 组件库，提供了丰富的业务组件和工具，帮助快速构建现代化的 Web 应用程序。

特性

• 🚀 开箱即用的高质量 Vue 组件
• 💼 专为企业级应用设计
• 🎨 基于 Element UI，风格统一
• 📱 响应式设计，移动端友好
• 🛠️ 完整的开发工具链
• 📖 详细的文档和示例

安装

npm install @zone-z/design element-ui

使用方法

完整引入

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ZoneDesign from '@zone-z/design';
import '@zone-z/design/lib/index.css';

Vue.use(ElementUI);
Vue.use(ZoneDesign);

按需引入

import { BasicBox, Charts, Descriptions } from '@zone-z/design';

Vue.component('BasicBox', BasicBox);
Vue.component('Charts', Charts);
Vue.component('Descriptions', Descriptions);

组件概览

• BasicBox - 基础容器组件
• Charts - 图表组件（基于 ECharts）
• Descriptions - 描述列表组件
• Empty - 空状态组件
• Form - 表单组件
• Preview - 图片预览组件
• Table - 表格组件
• Scrollbar - 滚动条组件
• 更多组件请查看源码...

开发

项目设置

yarn install

开发环境运行

yarn serve

构建生产版本

yarn build

代码检查和修复

yarn lint

依赖

• Vue 2.6+
• Element UI 2.15+
• @zone-z/utils

许可证

Apache-2.0