|
3 år sedan | |
---|---|---|
src | 3 år sedan | |
.eslintignore | 3 år sedan | |
.eslintrc.js | 3 år sedan | |
.gitignore | 3 år sedan | |
bootstrap.js | 3 år sedan | |
index.html | 3 år sedan | |
jest.config.js | 3 år sedan | |
midway.config.ts | 3 år sedan | |
package.json | 3 år sedan | |
postcss.config.js | 3 år sedan | |
readme.md | 3 år sedan | |
tailwind.config.js | 3 år sedan | |
tsconfig.json | 3 år sedan | |
vite.config.ts | 3 år sedan |
本项目基于 midway hooks ,大多数情况下遵循了官方建议。
但考虑到实际项目的复杂性与工作量,在某些代码的组织上沿用了之前项目的习惯。
具体情况如下:
.
├── bootstrap.js // 应用启动
├── jest.config.js // 单元测试
├── midway.config.ts // Midway 配置文件
├── src
│ ├── apis // 后端目录
│ │ ├── configuration.ts // Midway Hooks 配置文件
│ │ ├── controller // Api 目录
│ │ │ ├── index.test.ts // Api 测试文件
│ │ │ └── index.ts // Api 文件
│ │ ├── dto // 请求参数验证目录
│ │ ├── middleware // 中间件目录
│ │ ├── model // 数据库模型目录
│ │ └── service // service目录
│ ├── main.ts // 前端框架入口文件
│ └── ... // 剩下的都是前端相关文件
├── tsconfig.json
└── vite.config.ts
apis 目录用于存放后端代码。
这里没有使用 midway hooks 官方建议的那样,将目录简单的划分为 lambda(路由)
和 hooks(逻辑处理)
,而是沿用了大司空后端的结构。
一些通用的结构,如 utils 目录已经被移到 src/utils
下。
随着项目的迭代开发,可能会在各级目录中增加多个子目录,这是允许的。 但要保持一个原则:
目录结构尽可能精简。
想象一下,某个目录下有几十个子目录是什么体验?实际上,很多子目录的创建,都是“临时起意”,比如 types
和 interface
。
再有,新建的目录在其父级目录下,要有明确的语义,比如 utils/common
,结合其他子目录,可以很容易的猜到其含义,但是你能猜到 src/common
是什么含义吗?没人知道。
utils 目录用于存放相关工具方法,并拆分为了 3 个子目录:
使用 Vite 进行打包,速度快。
本项目使用 scss + tailwindcss。
本打算使用原生 css 变量 + PostCSS ,这也是 Vite 推荐的方式。但是考虑到大家的学习成本和项目进度,依然选择了熟悉的 scss。
在使用 tailwindcss 的时候,为了保持 html 精简,建议在 <style>
标签内使用 @apply
命令加载 tailwindcss 的 class 类。
VS Code 需要下载 Tailwind CSS IntelliSense
插件。
@ : src
controller : src/apis/controller
service : src/apis/service
utils : src/utils
$ npm run dev
$ npm run build
$ node bootstrap.js