起因#

大概的起因是我有一个用到了babylon js的一个模型查看器. ai给我写了一个基于qrc资源文件引用的html+js. 但是我看了一下, 对于后续开发似乎不是很友好啊, 下了一个js, 缓存到文件本地, 然后再用css和html来构建页面, 用js来做交互响应; 大致结构是这样

不太对啊, 那么假如说我要自己写一个前端ui那我能怎么办呢? 虽然能展示出来, 但是对于ui构建十分不利. 每次都要开一边 python main.py 再点点点, 激活html. 这样非常不顺手. 所以干脆看一下标准的前端开发流程了. 热更新, 代码库, 框架啥的直接一把梭哈,

初步WorkFlow#

使用JB的WebStorm(JB无敌这一块), 新建React-TS项目, 基于Vite模板构建;

Vite（发音为 /vit/，法语中意为“快”）是一个现代化的前端构建工具，由 Vue.js 作者尤雨溪（Evan You）团队开发。虽然名字来自 Vue 生态，但它完全支持 React、Svelte、Lit 等多种框架，尤其在 React 开发中越来越受欢迎。 Vite模板的特点1开发阶段不打包（No Bundle in Dev）○利用现代浏览器原生支持 ES Modules（ESM）。○按需加载模块：你访问 /src/main.tsx，Vite 只转换并返回这个文件及其依赖，无需预构建整个项目。○启动速度几乎与项目大小无关（即使上万个模块，启动也只需几百毫秒）。2极速热更新（HMR）○修改一个组件，只重新编译该文件，更新速度恒定且极快。3生产环境仍打包○使用 Rollup 进行生产构建，生成高度优化的静态资源（体积小、兼容性好）. (未来还是用了使用Rust写的新方案, 用于接替Rollup)

步骤#

环境准备#

在开始之前，你需要确保电脑上安装了 Node.js。

1
node -vnpm -v

如果能看到版本号，说明安装成功。

新建项目#

使用目前最流行的脚手架工具 Vite 来创建项目（它比传统的 create-react-app 快得多） WebStorm 会自动为你运行初始化命令。新建了以后, WebStorm会为你自动处理有关的依赖; 随后会弹出调试界面; 然后就会这样子: 最后就是在你的终端（命令行）里输入：

插件安装#

这里推荐两个插件(对于vsc来说, webstorm默认支持): ESLint 和 Prettier, 对于统一代码格式比较有用. 下面是来自ai的回答: ESLint 和 Prettier 是前端开发中常用的两个工具，它们都用于提升代码质量和一致性，但侧重点不同：

区别#

1. ESLint#

举例：ESLint 可以提示你“变量 foo 未使用”或“禁止使用 var，应使用 let 或 const”。

2. Prettier#

举例：Prettier 会自动把 if (x){console.log(x)} 格式化为：

1
if (x) {  console.log(x);}

两者如何配合使用？#

虽然功能有重叠（比如都能处理缩进、引号等），但最佳实践是：为避免冲突，通常会：

工具	关注点	是否可自动修复	典型用途
ESLint	代码质量、逻辑	部分支持	捕获 bug、强制编码规范
Prettier	代码格式、风格	完全支持	统一代码外观，减少格式争论