Streamlit Component 模板项目教程

最新推荐文章于 2024-08-31 08:58:01 发布

邢郁勇Alda

最新推荐文章于 2024-08-31 08:58:01 发布

阅读量335

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00021/article/details/139591021

Streamlit Component 模板项目教程

component-template Templates and example code for creating Streamlit Components 项目地址: https://gitcode.com/gh_mirrors/co/component-template

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

Streamlit Component 模板项目的目录结构如下：

component-template/
├── template/
│   ├── my_component/
│   │   ├── __init__.py
│   │   ├── example.py
│   │   └── frontend/
│   │       ├── public/
│   │       ├── src/
│   │       ├── package.json
│   │       ├── tsconfig.json
│   │       └── webpack.config.js
│   ├── .gitignore
│   ├── CONTRIBUTING.md
│   ├── Dockerfile
│   ├── LICENSE
│   ├── README.md
│   ├── dev.py
│   └── quickstart.png
├── template-reactless/
│   ├── my_component/
│   │   ├── __init__.py
│   │   ├── example.py
│   │   └── frontend/
│   │       ├── public/
│   │       ├── src/
│   │       ├── package.json
│   │       ├── tsconfig.json
│   │       └── webpack.config.js
│   ├── .gitignore
│   ├── CONTRIBUTING.md
│   ├── Dockerfile
│   ├── LICENSE
│   ├── README.md
│   ├── dev.py
│   └── quickstart.png
└── examples/
    ├── example1/
    ├── example2/
    └── example3/

目录结构介绍

template/: 包含使用 React 的 Streamlit 组件模板。
- my_component/: 组件的核心代码目录。
  - init.py: 组件的 Python 入口文件。
  - example.py: 组件的使用示例。
  - frontend/: 组件的前端代码目录。
    - public/: 前端静态资源目录。
    - src/: 前端源代码目录。
    - package.json: 前端项目的依赖配置文件。
    - tsconfig.json: TypeScript 配置文件。
    - webpack.config.js: Webpack 配置文件。
- .gitignore: Git 忽略文件配置。
- CONTRIBUTING.md: 贡献指南。
- Dockerfile: Docker 配置文件。
- LICENSE: 项目许可证。
- README.md: 项目说明文档。
- dev.py: 开发辅助脚本。
- quickstart.png: 快速启动示意图。
template-reactless/: 包含不使用 React 的 Streamlit 组件模板，结构与 template/ 类似。
examples/: 包含多个示例项目，展示了组件的不同使用场景。

2. 项目的启动文件介绍

启动文件

template/my_component/example.py: 这是组件的示例启动文件。它展示了如何使用组件，并提供了一些基本的配置和调用示例。

启动步骤

进入 template/ 目录。
激活虚拟环境：
```
source venv/bin/activate
```
安装依赖：
```
pip install -e .
```
启动示例应用：
```
streamlit run my_component/example.py
```

3. 项目的配置文件介绍

配置文件

template/my_component/frontend/package.json: 这是前端项目的依赖配置文件，定义了项目所需的 npm 包及其版本。
template/my_component/frontend/tsconfig.json: 这是 TypeScript 的配置文件，定义了 TypeScript 编译器的选项。
template/my_component/frontend/webpack.config.js: 这是 Webpack 的配置文件，定义了前端资源的打包规则。

配置文件介绍

package.json:
- dependencies: 定义了项目运行时所需的依赖包。
- devDependencies: 定义了开发过程中所需的依赖包。
- scripts: 定义了常用的 npm 脚本命令，如 start、build 等。
tsconfig.json:
- compilerOptions: 定义了 TypeScript 编译器的选项，如目标版本、模块系统、输出目录等。
webpack.config.js:
- entry: 定义了 Webpack 打包的入口文件。
- output: 定义了打包后的输出目录和文件名。
- module: 定义了不同类型文件的加载器规则。
- plugins: 定义了 Webpack 打包过程中使用的插件。