Tdesign-vue-next Chat 源码阅读(1) 本地启动

介绍

TDesign是腾讯开源的适配移动端的组件库,适合在 vue 3 技术栈项目中使用。本篇主要探讨聊天组件 TD Chat for AI

pnpm install

bash 复制代码
git clone https://github.com/Tencent/tdesign-vue-next.git --depth=1

pnpm:devPreinstall脚本

通过指令更新了git submodule,此项目关联了tdesign-common(TDesign 公共库)

js 复制代码
child_process.execSync('git submodule update --init', { stdio: 'inherit' });
bash 复制代码
cat ./.gitmodules # 查看submodule

# [submodule "tdesign-common"]
#        path = packages/common
#        url = https://github.com/Tencent/tdesign-common.git

monorepo关联了submodule的包

js 复制代码
// pnpm-workspace.yaml 
packages:
  - 'packages/**'
  - 'internal/**'
  - 'site'

postinstall脚本

调用internal/utils/package.json中的scripts,执行rollup构建internal/utils中的ts代码为js代码

json 复制代码
  "scripts": {
    "prebuild": "rollup -c rollup.config.ts"
  },

dev:chat

运行pnpm dev:chat时启动了dev服务,测试服务代码在packages/tdesign-vue-next-chat目录下,启动时执行packages/tdesign-vue-next-chat/site下的devscripts

site承载了文档功能,文档中引入了开发时tdesign-vue-next-chat组件用于开发环境调试

dev site服务使用了markedhighlight.jsmarked-highlight等组件

packages/tdesign-vue-next-chat/site/src/routes.js定义了site文档的路由文件,由此可找到packages/pro-components/chat/chat.tsx为示例代码、packages/pro-components/chat/chat.md为API文档

build:chat

cross-env NODE_ENV=production tsx ./vue-next-chat/index.ts执行internal/builds/vue-next-chat/index.ts构建到dist目录后,将构建物复制到了packages/tdesign-vue-next-chat/es

tdesign-publish-cli

顾名思义,发布npm包的工具,并没发现代码

tip

tdesign-vue-next Button 测试用例对比element-plus Button 测试用例

pnpm -C 是 pnpm (Performant NPM) 的一个命令行参数,用于在指定目录下执行命令,而不必先切换到该目录。 这个参数非常有用,可以让你在不离开当前工作目录的情况下,操作其他目录中的 Node.js 项目。

相关推荐
想学全栈的菜鸟阿董5 小时前
Crew连接多个 MCP 服务器
运维·服务器·github
想学全栈的菜鸟阿董5 小时前
通过 Stdio(标准输入/输出)传输机制,实现 CrewAI 与本地 MCP 服务器的连接
运维·服务器·github
星光不问赶路人9 小时前
彻底清理 Git 分支:从查看到批量删除无效分支的全流程指南
git·github
逛逛GitHub13 小时前
推荐 4 个实用、好玩儿的 GitHub 开源项目。
github
SelectDB13 小时前
Apache Doris 与 ClickHouse:运维与开源闭源对比
大数据·数据分析·github
CoderJia程序员甲15 小时前
GitHub 热榜项目 - 日榜(2025-10-20)
ai·开源·大模型·github·ai教程
spionbo15 小时前
Java Stream API中如何实现数据的并行处理?
github
over69716 小时前
Git 版本控制:从零开始掌握代码的时间旅行术
github
shandianchengzi16 小时前
【记录】Unity|Unity从安装到打开一个Github项目(以我的世界(仿)为例)
unity·c#·游戏引擎·github·我的世界·mc
穿花云烛展16 小时前
项目实践3:一个冲突引起的灾难
前端·github