README.md

Dormitory Management 宿舍管理系统

项目实例：https://dormitory-management-vue.pages.dev/

用户名（系统管理员）：admin

密码：123

---

• 项目结构（参考）
• CSS 类名要求
  • 单文件组件文件的大小写
  • 紧密耦合的组件名
  • 组件要求在模块系统中局部注册
  • CSS 类名要求

项目结构（参考）

│  home.html                # 根目录只用于存放 HTML 文件
│  index.html
│  README.md
│
├─components                # 该文件夹存放编写的组件
│      v-button.js
│      v-table.js
│
├─controller                # 该文件夹存放 HTML 的 
│      home.js              # JavaScript部分
│      index.js
│
├─public                    # 用于存放第三方依赖
│  ├─bootstrap              # 如 Vue / BootStrap
│  ├─css
│  │      tailwind.css
│  │
│  └─js
│          mock.js
│          vue.js
│
├─style                     # 用于存放 css 样式
│      common.css           # common.css 为公共样式
│      home.css             # 文件名与页面或组件的文件同名
│      index.css
│      v-button.css
│      v-table.css
│
└─utils                 # 该文件夹存放公共逻辑，如登录检查
        check-login.js

CSS 类名要求

单文件组件文件的大小写

在本项目中，单文件组件的文件名应该始终是横线连接 (kebab-case)。

反例

components/
|- mycomponent.vue
|- myComponent.vue

好例子

components/
|- my-component.vue

紧密耦合的组件名

反例

components/
|- admin-management.js
|- admin-table-row.js

好例子

components/
|- admin-management.js
|- admin-management-table-row.js

组件要求在模块系统中局部注册

由于 HTML 是大小写不敏感的，在 DOM 模板中必须使用 kebab-case作为组件名风格。

反例

Vue.component('TodoList', {
  // ...
})

Vue.component('TodoItem', {
  // ...
})

好例子

components/
|- todo-list.js
|- todo-item.js

import { TableRow } from "./admin-management-table-row.js";

// 注意导出的组件命名为大写字母开头
export const AdminManagement = {
  name: "admin-management",
  components: {
    "table-row": TableRow,
  },
  template: `
    <div>
      <span>{{ bar }}</span>
      <table-row/>
      <table-row/>
    </div>
  `,
  data: {
    bar: "foo",
  },
  // ...
}

CSS 类名要求

css 的每个类名都要以文件名开头（除了 common.css 内的类)，比如在用于 v-table 组件的 v-table.css内，类名要写成 v-table-header，防止起了同样的类名发生冲突。

v-table.css

.v-table-header {
    height: 114px;
    width: 514px;
}

index.css

.index-header {
    height: 1919px;
    width: 810px;
}