TerroaUI 组件库

基于 Vue 2.0 和 Element UI 的组件库，可用于第三方平台集成。

nvm use 16.13.0

项目结构

TerroaUI/
├── src/                  # 组件库源码目录
│   ├── components/       # 自定义组件目录
│   ├── styles/           # 组件库样式目录
│   │   └── index.css     # 全局样式文件
│   ├── themes/           # 主题管理目录
│   │   ├── index.js      # 主题管理器
│   │   └── README.md     # 主题使用说明
│   └── index.js          # 组件库入口文件（定义组件库如何安装和导出组件）
├── examples/             # 组件调试示例目录（用于本地开发调试）
│   ├── public/           # 静态资源目录（可放置第三方库或其他静态资源）
│   │   └── TerroaUI/    # 示例静态资源目录
│   │       └── libs/     # 库文件目录
│   ├── App.vue           # 调试图页面（展示如何使用组件）
│   ├── main.js           # 调试入口文件（配置调试环境）
│   └── index.html        # 调试页面模板
├── publish/              # 发布目录
│   └── TerroaUI/             # TerroaUI 组件库发布目录
│       └── dist/         # 构建后的文件目录（npm run build 后生成）
├── webpack.config.js     # webpack 构建配置文件（区分开发和生产环境）
├── .babelrc              # Babel 配置文件（JavaScript 编译配置）
└── package.json          # 项目配置文件（依赖、脚本命令等）

开发调试

安装依赖

npm install

启动调试服务

npm run dev

访问 http://localhost:9000 查看调试页面。在调试环境中，您可以：

• 实时预览组件效果
• 修改代码后自动刷新页面
• 调试组件功能和样式
• 访问 examples/public 目录下的静态资源文件

静态资源访问

在开发环境中，您可以将静态资源文件放置在 examples/public 目录下，这些文件将可以通过以下方式访问：

• 文件路径：examples/public/TerroaUI/libs/TerroaUI.min.js
• 访问 URL：http://localhost:9000/TerroaUI/libs/TerroaUI.min.js

构建组件库

npm run build

构建后的文件位于 publish/TerroaUI/dist/ 目录下，包含：

• TerroaUI.min.js - 组件库的 JavaScript 文件
• TerroaUI.min.css - 组件库的样式文件
• 字体文件（Element UI 所需的图标字体）

使用组件库

在项目中安装

npm install TerroaUI

全量引入

import Vue from 'vue';
// 引入组件库的 JavaScript 文件
import TerroaUI from 'TerroaUI';
// 引入组件库的样式文件
import 'TerroaUI/dist/TerroaUI.min.css';

Vue.use(TerroaUI);

按需引入

// 引入特定组件
import { TeButton, ThemeManager } from 'TerroaUI';
// 引入样式文件
import 'TerroaUI/dist/TerroaUI.min.css';

export default {
  components: {
    TeButton
  }
}

在模板中使用

<!-- 使用 TerroaUI-container 类来居中显示组件 -->
<div class="TerroaUI-container">
  <te-button>按钮</te-button>
</div>

或者，如果您想自定义容器样式，可以直接应用样式：

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <te-button>按钮</te-button>
</div>

主题系统

TerroaUI 提供了丰富的主题系统，支持 14 种不同的主题颜色方案：

• light - 浅色主题（默认）
• dark - 深色主题
• terroa - 地脉主题
• blue - 碧海蓝主题
• brown - 榛果棕主题
• cyan - 冰川青主题
• green - 森氧绿主题
• olive - 橄榄绿主题
• orange - 霞光橙主题
• pink - 樱吹粉主题
• purple - 幻夜紫主题
• red - 朱砂红主题
• yellow - 琉璃金主题

主题切换示例

import { ThemeManager } from 'TerroaUI';

// 切换到深色主题
ThemeManager.setTheme('dark');

// 获取当前主题
const currentTheme = ThemeManager.getCurrentTheme();

// 获取所有可用主题
const themes = ThemeManager.getAvailableThemes();

更多主题使用详情请查看 主题使用说明。

组件开发

1. 在 src/components/ 目录下创建新的组件文件
2. 在 src/index.js 中导入并导出新组件（确保组件能被正确安装和使用）
3. 在 examples/App.vue 中添加新组件的使用示例用于调试
4. 运行 npm run dev 进行调试开发
5. 运行 npm run build 构建组件库

注意事项

• 本组件库基于 Vue 2.0 开发，使用时需确保项目也基于 Vue 2.0
• 依赖 Element UI，使用前请确保已安装 Element UI 或在引入组件库时一并引入
• 构建后的组件库支持 UMD 格式，可直接在浏览器中通过 <script> 标签引入
• 组件库中的组件使用了 Element UI 的组件和方法，使用时需要确保 Element UI 可用
• 使用组件库时，需要同时引入 JavaScript 文件和 CSS 文件以确保样式正确显示
• 为了获得最佳显示效果，建议在容器元素上使用 TerroaUI-container 类
• 在开发环境中，可以将静态资源放置在 examples/public 目录下进行访问