Titian Design 组件库使用教程

Titian Design 组件库使用教程

titian-design 项目地址: https://gitcode.com/gh_mirrors/ti/titian-design

1. 项目的目录结构及介绍

Titian Design 组件库的目录结构如下：

titian-design/
├── LICENSE
├── README.md
├── packages/
│   ├── h5/
│   ├── react/
│   ├── vue/
│   └── weapp/
├── titian-h5/
├── titian-weapp/
└── ...

目录结构介绍

• LICENSE: 项目的开源许可证文件，Titian Design 使用 MIT 协议。
• README.md: 项目的介绍文件，包含项目的基本信息、使用方法和贡献指南。
• packages/: 包含不同平台的组件库代码，如 Web Components、React、Vue 和微信小程序。
  • h5/: Web Components 组件库代码。
  • react/: React 组件库代码。
  • vue/: Vue 组件库代码。
  • weapp/: 微信小程序组件库代码。
• titian-h5/: Web Components 组件库的示例和文档。
• titian-weapp/: 微信小程序组件库的示例和文档。

2. 项目的启动文件介绍

Titian Design 组件库的启动文件主要位于各个子包的 src/ 目录下。以下是各个平台的启动文件介绍：

Web Components

• packages/h5/src/index.js: Web Components 组件库的入口文件，负责初始化和导出组件。

React

• packages/react/src/index.js: React 组件库的入口文件，负责初始化和导出组件。

Vue

• packages/vue/src/index.js: Vue 组件库的入口文件，负责初始化和导出组件。

微信小程序

• packages/weapp/src/index.js: 微信小程序组件库的入口文件，负责初始化和导出组件。

3. 项目的配置文件介绍

Titian Design 组件库的配置文件主要用于项目的构建和开发环境配置。以下是主要的配置文件介绍：

Web Components

• packages/h5/package.json: 包含项目的依赖、脚本命令和版本信息。
• packages/h5/webpack.config.js: Webpack 配置文件，用于项目的构建和打包。

React

• packages/react/package.json: 包含项目的依赖、脚本命令和版本信息。
• packages/react/webpack.config.js: Webpack 配置文件，用于项目的构建和打包。

Vue

• packages/vue/package.json: 包含项目的依赖、脚本命令和版本信息。
• packages/vue/webpack.config.js: Webpack 配置文件，用于项目的构建和打包。

微信小程序

• packages/weapp/project.config.json: 微信小程序的项目配置文件，包含小程序的基本信息和配置。
• packages/weapp/app.json: 小程序的全局配置文件，包含页面的路径和窗口表现。

通过以上配置文件，开发者可以自定义项目的构建和开发环境，以满足不同的需求。

titian-design 项目地址: https://gitcode.com/gh_mirrors/ti/titian-design