养成一个良好的代码风格不仅有助于我们代码的浏览和维护，更能让我们养成一个良好的码代码习惯。

文件命名

1.1 文件名称的命名规则

文件创建位置和文件命名需要符合统一规范

1.页面使用短横线命名法（ lg-table.vue ）

2.js文件使用驼峰命名（ schoolManagement.js）

3.不得包含汉字空格和特殊字符

1.2 class命名

全部采用小写字母+中划线命名，例如：

<img class="company-logo" src="xxx" alt="xxx" />

1.3 函数

命名规则 :

常见的前缀动词

动词	含义	返回值
is	判断是否	函数返回一个布尔值。true：为某个值；false：不为某个值
get	获取某个值	函数返回一个非布尔值
set	设置某个值	无返回值、返回是否设置成功或者返回链式对象
open	打开	打开某些东西执行操作
init	初始化	初始化要加载的数据
load	加载某些数据	正常加载的
to	转换	转换数据进行操作

1.2各个子页面的命名规则

1. 统一用翻译的英文命名（推荐）
2. 如果文件名过长，如pro—product
   • [x] 注意：不要中英文混用

例如：

• 首页—index
• 产品列表—pro-list 产品详细页面—pro-detail
• 新闻列表—news-list 新闻详细页面—news-detail
• 发展历史—history
• 关于我们—aboutus
• 联系我们—linkus
• 信息反馈—feedback留言—leavewords

1.3图片命名规范

图片的名称分为头尾两部分，用下划线隔开，头部表示此图片的大类性质，例如广告，标志，菜单，按钮等

• banner：放置在页面顶部的广告，装饰图案等长方形的图片
• logo：标志性的图片
• button：在页面上位置不固定，并且带有链接的小图片
• menu：在页面中某一位置连续出现，性质相同的链接栏目的图片
• pic：装饰用的图片

例子：

• banner_sohu.gif, banner_sina.png

• menu_aboutus.gif,menu_job.png

• title_news.png

• logo_police.png

• pic_people.png

模块

模块是通过多个组件组合而成，一个页面可以称作为一个模块； 例如一个页面有表格组件，表单组件，图表组件，自定义组件组成； 不同的组件可以组成多种模块，部分模块是可复用的；

应用

应用是通过多个模块组合而成，一个模块或多个模块 可以称作为一个应用； 应用中是有多个模块组成，例如视频监控应用包含，视频列表，视频管理，视频监控...；

代码编写

1. 如果公共组件及文件有不完善或缺陷应当及时反馈，不可随意修改公共组件及文件
2. 在书写代码中比较复杂的函数须进行注释，说明函数使用
3. 项目采用模块化开发的方式进行编写
4. 公共模块应当存放在components
5. 局部模块则在页面子目录下创建components存放
6. 使用vue3语法进行代码编写
7. api接口需存放在相应文件下面
8. console、debuger、alert等不要提交到代码仓库
9. 不要有任何多余的代码。由于需求改变多出的代码，必须在不影响其它功能的情况下将其相关联的属性、方法都得删除，没用的代码日积月累后面就没法维护了。注释的代码如果有用的情况下写好备注为什么存在，并且使用TODO注释。
10. 没用到的参数就别写上去。特别是forEach有时候用不到index索引就没必要写。
11. 使用三元运算符替代简单的if判断，但多重判断的情况一定要优先使用if而不是三目运算符。代码可读性一定比代码简洁性的优先级要高。
12. 主要的逻辑方法和属性都得加注释，注释不要写废话，写明方法是什么作用，需要传什么参数，有什么返回值。

模块化开发

1. 页面是由模块构成

2. 每个模块存放在独立文件

3. 页面功能应该具体划分，表格相关操作内容放到表格模块（图片预览等），非表格操作内容放到表单模块（添加，删除，修改等），公共数据则存放到hooks（选择类数据等）

4. 模块命名应该遵守如下规则，如内容page-table表示页面表格，宫格则为page-grid，表单操作form-model则表示表单为弹窗（操作类默认为form-mode），抽屉类表单则使用form-drawer表示

5. 每个子页面都应该建立一个目录，而不是组件

注意事项

1.请严格按照规范进行开发，未按要求进行编写造成的返工需在工期内完成

2.发现问题应当及时反馈

文件结构

├──lg-demo
	├── src (存放视图、公共组件、工具类、image)
	│	├── assets (本地静态资源：图片、svg等)
	│	│
	│	├── components (存放公用全局组件)
	│	│
	│	├── layout (存放框架布局视图)
	│	│
	│	├── router (存放路由信息)
	│	│
	│	├── store (存放组件的状态vuex)
	│	│
	│	├── utils (存放工具类函数)
	│	│
	│	└── pages (存放页面视图)        
	│	│   ├── school-manage (模块目录)
    │   │   │   
    │   │   │   ├── teacher-manage (子模块目录)
    │   │   │
    │   │   │   │   ├── api (存放请求api目录)
    │   │   │   │   ├── components (子模块组件)
    │   │   │   │   │   ├── form-model (页面构成模块)
    │   │   │   │   │   ├── page-table (页面构成模块)
    │   │   │   │   │   │
    │   │   │   │   ├── teacher-details (子页面)
    │   │   │   │   │   ├── api (存放请求api目录)
    │   │   │   │   │   ├── components (子模块组件)
    │   │   │   │   │   │   ├── page-table (子模块组件) 
    │   │   │   │   │   ├── index (页面)
    │   │   │   │   │   │ 
    │   │   │   │   ├── hooks (存放hooks方法目录)
    │   │   │   │   ├── index (页面)
    │   │   │   │   │ 
    │	│   ├── school-video (模块目录)
    │   │   │   ├── video-manage (子模块目录)
    │   │   │
    │   │   │   │   ├── api (存放请求api目录)
    │   │   │   │   ├── components (子模块组件)
    │   │   │   │   │   ├── page-model (页面构成模块)
    │   │   │   │   │   ├── page-table (页面构成模块)
    │   │   │   │   ├── hooks (存放hooks方法目录)
    └── │   │   │   ├── index (页面)

代码检查

1.提交前请确认代码格式是否准确，代码注释是否准确

2，提交前应先执行eslint进行检查，确保代码语法符合要求

// 执行该命令进行检查并修复

npm run  fix

// 仅检测不修复

npm run  eslint