cma-ziguangzhiyuan-test-vue2

v1.0.8

Published

8 months ago

一个基于Vue 2和Element UI的组件展示库，支持UMD格式打包

Downloads

0High
0Medium
0Low

tj_ygy

vue vue2 element-ui component umd ygy-component-demo-test ui-library frontend

CMA 紫光至远测试组件 Vue2版

一个基于 Vue 2 和 Element UI 的组件展示库，专为CMA紫光至远项目定制，支持 UMD 格式打包，可在多种环境中使用。

✨ 特性

🎯 Vue 2 兼容 - 完全支持 Vue 2.6+
📦 UMD 打包 - 支持 UMD、ES Module 多种格式
🎨 Element UI 集成 - 完整的 Element UI 组件展示
📱 响应式设计 - 支持桌面和移动设备
🔧 兼容性检测 - 自动检测依赖库可用性
🎪 丰富组件 - 包含按钮、表单、表格、导航等组件
🚀 静态组件注册 - 支持多组件自动注册
🌍 CDN 友好 - 可通过 CDN 直接引入使用

📦 安装

NPM 安装

npm install @NMIC_YYZY/cma-ziguangzhiyuan-test-vue2

或使用 yarn：

yarn add @NMIC_YYZY/cma-ziguangzhiyuan-test-vue2

CDN 引入

<!-- 压缩版本（推荐生产环境） -->
<script src="https://unpkg.com/@NMIC_YYZY/cma-ziguangzhiyuan-test-vue2/lib/cma-ziguangzhiyuan-test-vue2.umd.min.js"></script>

<!-- 完整版本（用于开发调试） -->
<script src="https://unpkg.com/@NMIC_YYZY/cma-ziguangzhiyuan-test-vue2/lib/cma-ziguangzhiyuan-test-vue2.umd.js"></script>

🚀 快速开始

1. 基本HTML页面使用（推荐）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CMA 紫光至远组件测试</title>
    
    <!-- Vue 2 -->
    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    
    <!-- Element UI CSS -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css">
    
    <!-- Element UI JS -->
    <script src="https://unpkg.com/[email protected]/lib/index.js"></script>
</head>
<body>
    <div id="app">
        <!-- 主组件 -->
        <ygy-component-demo-test-u-m-d 
            title="CMA 紫光至远组件展示"
            description="专为 CMA 项目定制的组件库"
            @component-loaded="onLoaded"
            @data-export="onDataExport">
        </ygy-component-demo-test-u-m-d>
        
        <!-- 测试组件 -->
        <test-component></test-component>
    </div>

    <!-- 引入 CMA 组件库 -->
    <script src="https://unpkg.com/@NMIC_YYZY/cma-ziguangzhiyuan-test-vue2/lib/cma-ziguangzhiyuan-test-vue2.umd.min.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            methods: {
                onLoaded(info) {
                    console.log('组件加载完成:', info)
                },
                onDataExport(data) {
                    console.log('数据导出:', data)
                }
            }
        })
    </script>
</body>
</html>

2. 作为 Vue 插件使用

import Vue from 'vue'
import CmaZiguangzhiyuanTestVue2 from '@NMIC_YYZY/cma-ziguangzhiyuan-test-vue2'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 必须先安装 Element UI
Vue.use(ElementUI)
// 然后安装本组件
Vue.use(CmaZiguangzhiyuanTestVue2)

// 在模板中使用
// <ygy-component-demo-test-u-m-d title="紫光至远组件展示"></ygy-component-demo-test-u-m-d>
// <test-component></test-component>

3. ES Module 方式

// 导入整个组件库
import ComponentLibrary from '@NMIC_YYZY/cma-ziguangzhiyuan-test-vue2/lib/cma-ziguangzhiyuan-test-vue2.esm.js'

// 或者按需导入特定组件
const { YgyComponentDemoTestUMD, TestComponent } = ComponentLibrary

export default {
  components: {
    YgyComponentDemoTestUMD,
    TestComponent
  }
}

4. 本地文件引入

下载对应文件到本地，然后引入：

<!-- 本地文件引入 -->
<script src="./lib/cma-ziguangzhiyuan-test-vue2.umd.min.js"></script>

<script>
    // 组件会自动注册为全局组件
    // 全局变量: window.CmaZiguangzhiyuanTestVue2
    console.log(window.CmaZiguangzhiyuanTestVue2)
</script>

📖 API 文档

🏠 主组件 (YgyComponentDemoTestUMD)

Props

| 属性名 | 类型 | 默认值 | 描述 | |--------|------|--------|------| | title | String | 'Element UI 组件展示' | 组件标题 | | description | String | '这是一个可独立使用的组件展示库' | 组件描述 |

Events

| 事件名 | 参数 | 描述 | |--------|------|------| | component-loaded | { name, elementUIAvailable, timestamp } | 组件加载完成时触发 | | data-export | { form, table, active, timestamp } | 数据导出时触发 |

🧪 测试组件 (TestComponent)

简单的测试组件，用于验证多组件注册功能。

<test-component></test-component>

🎨 组件展示

主组件包含以下 Element UI 组件的完整展示：

📱 基础组件

✅ 按钮组件 - 多种按钮类型和状态
✅ 输入框 - 基础输入、带图标、可清空、文本域
✅ 标签组件 - 多种颜色和类型
✅ 评分组件 - 星级评分显示
✅ 开关组件 - 开关控制

📈 数据展示

✅ 表格组件 - 带操作按钮的数据表格
✅ 标签系统 - 多种标签展示

🔔 反馈组件

✅ 警告组件 - 多种类型的警告提示
✅ 消息提示 - 成功、警告、错误消息
✅ 通知 - 系统通知组件
✅ 确认框 - 用户确认对话框

🧭 导航组件

✅ 面包屑导航 - 层级导航显示
✅ 步骤条 - 流程步骤显示

🔧 功能特性

✅ 自动兼容性检测 - 检测 Element UI 可用性
✅ 响应式设计 - 支持桌面和移动设备
✅ 事件系统 - 完整的组件事件支持
✅ 数据导出 - 支持表单和表格数据导出

📋 依赖要求

必需依赖

Vue 2.6+ - 核心框架
Element UI 2.15+ - UI组件库

重要说明

⚠️ 不兼容 Vue 3 - 仅支持 Vue 2.x 版本
⚠️ 依赖加载顺序 - 必须先加载 Vue 和 Element UI，再加载本组件

🛠️ 开发

# 克隆项目
git clone https://github.com/yourusername/cma-ziguangzhiyuan-test-vue2.git

# 安装依赖
npm install

# 启动开发服务器
npm run serve

# 构建 UMD 包
npm run build:umd

# 启动测试服务器
npm run test:umd

# 发布到 NPM
npm run publish:npm

📁 文件结构

lib/
├── cma-ziguangzhiyuan-test-vue2.umd.js      # UMD 格式（开发版）133.9KB
├── cma-ziguangzhiyuan-test-vue2.umd.min.js  # UMD 格式（压缩版）54.3KB ⭐ 推荐
└── cma-ziguangzhiyuan-test-vue2.esm.js      # ES Module 格式 127.3KB

🌍 浏览器支持

Chrome 60+
Firefox 55+
Safari 12+
Edge 79+
IE 11+ (需要 polyfill)

🧪 测试页面

项目提供了多个测试页面用于验证功能：

test-umd.html - 基础UMD测试

📚 相关文档

异地上传清单.md - 部署清单

🔍 故障排除

📄 许可证

MIT

🤝 贡献

欢迎提交 Issues 和 Pull Requests！

📞 联系

如有问题或建议，请通过repo的Issues联系。

⚠️ 重要提醒:

本组件仅支持 Vue 2，请确保使用正确的Vue版本
必须先加载 Vue 2 和 Element UI 依赖
推荐使用压缩版本的UMD文件以获得更好的加载性能