HBee's Repo

Appearance

框架 ​

所有项目的入口文件和入口函数必须以 main 命名。

Vue3 ​

推荐 ​

目录组织 ​

public// 静态资源目录，构建时会被复制到 dist 目录，无需经过打包工具处理
favicon.ico
src
api// 接口请求目录
user
assets// 静态资源目录，需要被打包工具处理
logo.png
components// 公共组件目录
Tree
composables// 组合函数目录
useUser.ts
layout// 布局组件目录
Layout.vue
router// 路由目录
index.ts
modules
store// 全局状态管理器目录
useUserStore.ts
utils// 工具函数目录
request.ts
views// 页面目录
Home.vue
user

我的项目的目录组织通常是按模块进行的。例如，我们有一个 user 模块。那么，我们对应的有以下目录 / 文件（其中有些目录 / 文件可能没有，视情况而定）：

  • api/user —— user 模块的接口请求目录
  • composables/useUser.ts —— user 模块的组合式函数
  • router/modules/user.ts —— user 模块的路由
  • store/useUserStore.ts —— user 模块的全局状态
  • views/user —— user 模块的页面

接口 ​

所有接口请求都必须放置在 api 下并且按模块划分。接口请求逻辑写在 index.ts 文件中，接口类型写在 types.ts 文件中。

组合式函数 ​

组合式函数文件名称和函数名称必须以 use 开头。

如何写好组合式函数 ​

参考 官方文档的组合式函数章节

参考 VueUse 最佳实践

参考 VueUse 指南

路由 ​

所有路由文件必须放置在 router/modules 下并且按模块划分。每个路由对象结构必须对应页面文件的目录结构。

例如，我们有以下页面目录结构：

views
user
User.vue
detail
UserDetail.vue

对应的路由对象结构：

ts
import { RouteRecordRaw } from 'vue-router'

import Layout from 'layout/Layout.vue'

export const userRoute: RouteRecordRaw = {
  path: '/user',
  component: Layout,
  children: [
    {
      path: '',
      component: () => import('views/user/User.vue'),
    },
    {
      path: 'detail',
      component: () => import('views/user/detail/UserDetail.vue'),
    },
  ],
}

全局状态 ​

store 文件名称和函数名称 必须以 use*Store 方式命名。

页面 ​

所有页面必须放置在 views 下并且按模块划分。页面目录结构对应路由 path，具体看路由。

Nestjs ​

目录组织 ​

database
migrations// 数据库迁移文件目录
seeds// 数据库填充文件目录
data-source.ts
entity.ts// 为了方便管理，在这里导入 src 下的所有实体并重新导出
util.ts
mocks// 测试用的 Mock 目录
index.ts
user.ts
scripts// 脚本目录
generate-key.ts// 生成 JWT 密钥的脚本
src
users// user 模块
utils// 工具函数目录
app.controller.spec.ts
app.controller.ts
app.module.ts
app.service.ts
main.ts
module.ts// 放置 app module 使用的模块，方便管理

数据库 ​

命名规范 ​

  • 实体类名必须为单数，如：User
  • 数据库表名必须为复数，且使用 snake_case，如：my_photos
  • 数据库迁移名字必须为时间戳+操作+表名+可选的（列操作+列名），如：1666949227023-CreateUsersTable、1666949227023-AlterPostsTableAddColIsPublished
  • 数据库填充文件名必须使用时间戳+表名，如：1666949227023-users
  • 数据库字段名必须使用 snake_case，如：view_count
  • 数据库表主键必须是 id
  • 数据库表外键必须是 resource_id，如：user_id、post_id

迁移文件 ​

必须使用 TypeORM 的 migration:create 命令生成迁移文件。生成的文件名自带时间戳，所以在命令行传参时无需写时间戳，直接写 CreateUsersTable 即可。

填充文件 ​

必须使用 TypeORM-extension 的 seed:create 命令生成填充文件。生成的文件名自带时间戳，所以在命令行传参时无需写时间戳，直接写 users 即可。

Mock ​

必须按模块组织 mock 文件，每个模块单独一个 mock 文件，如：user 模块对应的 mock 文件为 user.ts

Electron ​

目录组织 ​

我的 Electron 项目的目录组织是基于 Electron Forge 的 Vite + TypeScript 模板构建的。

而且我的 Electron 项目集成了 Vue3 作为前端框架，所以目录组织也有类似于 Vue3 项目的目录结构。

src
components// 组件目录
Dialog
composables// 组合式函数目录
useDialogState.ts
router// 路由目录
index.ts
server// 在主进程上执行的文件，由于需要访问数据库，所以目录结构类似 Nestjs 的项目
database
records// record 模块目录
store
usePasswordRecord.ts
utils
message.ts
views
home

Copyright © 2022-present HBee