# 楼宇智控

**Repository Path**: SeanYan2020/building

## Basic Information

- **Project Name**: 楼宇智控
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-26
- **Last Updated**: 2024-06-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 风格指南

本项目的风格指南主要是参照 `vue` 官方的[风格指南]

## Component

所有的`Component`文件都是以大写开头 (PascalCase) 但除了 `index.vue`。

例子：

- `@/components/BackToTop/index.vue`
- `@/components/Charts/Line.vue`
- `@/views/example/components/Button.vue`

## JS 文件

所有的`.js`文件都遵循横线连接 (kebab-case)。

例子：

- `@/utils/open-window.js`
- `@/views/svg-icons/require-icons.js`
- `@/components/MarkdownEditor/default-options.js`

## Views

在`views`文件下，代表路由的`.vue`文件都使用横线连接 (kebab-case)，代表路由的文件夹也是使用同样的规则。

例子：

- `@/views/svg-icons/index.vue`
- `@/views/svg-icons/require-icons.js`

使用横线连接 (kebab-case)来命名`views`主要是出于以下几个考虑。

- 横线连接 (kebab-case) 也是官方推荐的命名规范之一 [文档](https://cn.vuejs.org/v2/style-guide/index.html#%E5%8D%95%E6%96%87%E4%BB%B6%E7%BB%84%E4%BB%B6%E6%96%87%E4%BB%B6%E7%9A%84%E5%A4%A7%E5%B0%8F%E5%86%99-%E5%BC%BA%E7%83%88%E6%8E%A8%E8%8D%90)
- `views`下的`.vue`文件代表的是一个路由，所以它需要和`component`进行区分(component 都是大写开头)
- 页面的`url` 也都是横线连接的，比如`https://www.xxx.admin/export-excel`，所以路由对应的`view`应该要保持统一
- 没有大小写敏感问题


【components】下命名规则
	目录必须首字母大写-使用大驼峰
	组建目录下必须有index.vue或者index.js文件作为主文件

【views】下命名规则
	目录必须小写字母开头
	文件名必须小写字母开头

【uiills】下命名规则
	必须是小写字母，多单词用中划线-分割

【CSS命名规则】
页面-最外层必须是class=“page”+页面名称 例如 class=“page order”
使用SCSS
以.page.order{ }

主体的样式内容 写在主框架内
涉及页面布局请使用-header,-content,-footer,-sider,-main等做布局后缀
例如：order-header


功能点以单词命名 二级三级用中划线命名 例如 order-header 或者order-header-left
三级命名用直接双下换线开头录入 __title  例如order-header-left__title

第四级命名可以直接使用单词命名 但是在写CSS样式的时候记得 嵌套结构写，以免污染全局

例如 CSS样式到底第五层 我无法解决 请考虑component或plugin， 切记component大于plugin，可以理解为plugin为最小单元组建，直接出现component中的组建或者创建在page对应的目录页面下

涉及到内容小组的 请将其编辑为组建 
组建命名方式与页面相同，仅修改最外层 component 或者 plugin例如：class=“component goods” OR class=“plugin head”