环境准备
Node.js 版本需要 v18 或以上
- 推荐使用最新稳定版本的 Node.js,并且使用 nvm 来管理安装 node.js 版本。
使用 VSCode
- 无论你喜欢什么开发工具,但是我推荐你使用 vscode,zenweb 项目就是使用 vscode 来开发。所以有任何开发工具上面的问题你都能找到答案。
学习 TypeScript
- zenweb 项目使用 TypeScript 语言来开发,使用 TypeScript 来开发项目会获得最佳开发体验。 当然如果你只想用 JavaScript 来开发项目也可以,本教程所有示例代码都会提供两份示例,但是一切还是以 TypeScript 为准,JavaScript 只是作为一种参考。
使用 Yarn 包管理工具
- 本项目使用
Yarn v4
管理,需要启用corepack
corepack enable
- 本项目使用
参考项目 zenweb-demo
- 本项目作为框架功能的一些常用使用演示,可以作为练手参考项目。
一些说明
文档中提到的
src
目录指的是 TypeScript 项目,TypeScript 项目的源码存放在src
目录中,编译结果存放在app
目录下, 不要修改app
目录下的代码,哪里是 TypeScript 项目自动构建出来的结果,会被删除。- 在 JavaScript 项目中请直接将源码放在
app
目录中
- 在 JavaScript 项目中请直接将源码放在
项目目录规则
通常来说,一个 web 项目的文件夹组织规则如下:
myweb
├── src TS项目的源码存放目录,JS项目以此类推
| ├── index.ts 项目应用入口,模块配置
| ├── controller 控制器文件夹
| | ├── index.ts 控制器类文件
| | └── ...
| ├── service 业务逻辑文件夹
| | ├── user.ts 业务逻辑类文件
| | └── ...
| ├── model 数据库层模型,通常是由 ORM 系统自动生成
| | ├── user.ts 数据库表模型文件
| | └── ...
| ├── form 表单文件夹,表单的生成与数据校验
| | ├── user.ts
| | └── ...
| └── utils 工具文件夹
├── view 视图文件夹,在需要服务器端渲染的时候存放模版文件
└── app 生产环境项目执行目录,TS项目中的构建产物 或 JS项目中的源码存放位置