streamlit自定义组件教程和组件开发环境配置

根据文章
https://streamlit-components-tutorial.netlify.app/introduction/project-setup/

主要进行python、node.js和npm的安装配置

python环境不多赘述&＃xff0c;主要说一下node.js和npm的安装配置&＃xff08;windows&＃xff09;

①下载安装node.js

http://nodejs.cn/download/

推荐下载16版本&＃xff0c;可以避免后期报错&＃xff08;Error: error:0308010C:digital envelope routines::unsupported&＃xff09;

安装过程中记得勾选automatic&＃xff0c;自动安装相关包

npm会自动被安装

默认安装路径下系统环境会自动配置&＃xff0c;自定义路径需要自己去配置环境

安装完成后检查

npm -v
node -v

②安装npm国内源和依赖

$ npm install -g cnpm --registry&＃61;https://registry.npm.taobao.org

安装后根据教程进行&＃xff1a;

cd streamlit_custom_slider/frontend
cnpm install # Initialize the project, and install npm dependencies


这里 npm改为cnpm&＃xff0c;使用国内源下载

如果之前安装过没有卸载干净&＃xff0c;会出现&＃xff08;ERESOLVE could not resolve&＃xff09;报错

此时可以把node_moudles进行清空&＃xff0c;并且重新下载相关包。

引用&＃xff1a;

https://blog.csdn.net/weixin_44213904/article/details/122355779

1. 安装rimraf: cnpm install rimraf -g
2. 删除node_modules文件夹&＃xff1a; rimraf node_modules
3. 清空缓存&＃xff1a;npm cache clean --force
4. 重新安装淘宝镜像&＃xff1a; npm install -g cnpm --registry&＃61;https://regisry.npm.taobao.org
5. 再次执行命令进行相关包的安装&＃xff1a; cnpm install


③测试

npm run start
streamlit run streamlit_custom_slider/__init__.py


如果出现以下界面&＃xff0c;说明你环境配置成功了&＃xff0c;现在可以学习制作自己的streamlit组件了