readme

小樱花sakura
104 阅读9分钟

技术关键字

  • Vue 3 + Vite + Vue Router4

目录结构

  • assets --- 存放静态资源文件

  • components --- 分模块存放子组件，注意提取公用组件在common文件夹中，子模块也可以提取公用部分在子模块的common文件夹中

  • domins --- 存放静态常量和方法

  • api --- 网络请求axios，注意，网络请求方法切勿绑在vue的原型链上，分模块，使用import/export按需引入

  • router --- 路由存放位置，注意使用懒加载import方式

  • utils --- 工具方法存放位置，开发中按需添加

  • views --- 视图父组件存放位置

  • main.js --- 入口文件，权限管理在此处处理，经过路由首位跳转到页面

其余模块按需添加，鼓励使用时下新技术，如vite打包方式、hooks单独功能抽离、pinia新型状态管理方式等；一定要做好模块区分，原则上一个方法的代码行数不超过200行。

接口请求

  • 使用axios.js，在此基础上进行封装、整合。 --- 详情请看src/api/axios.js

样式规范

  • sass技术

代码规范工具

  • eslint代码检测工具
  • prettier代码格式化工具

组件属性规范

  • 1.组件名称 组件名标签应为大驼峰；
  • 2.组件属性优先级， 按照以下顺序依次书写：
    1. v-if/v-show
    2. v-for
    3. 指令
    4. ref/model/v-model/id
    5. props传参常量属性/标签自带属性
    6. props传参变量属性
    7. 事件方法/emit方法
    8. class类
    9. style等行内属性
    10. 其它相关属性

vue 组件选项的推荐顺序

  • Vue 组件/实例的选项应该有统一的顺序。推荐按照eslint-plugin-vue默认的规则排序，给前端代码良好的阅读体验，减少维护成本。
  • 按照以下顺序依次书写：
  1. 副作用 (触发组件外的影响)
  • el
  1. 全局感知 (要求组件以外的知识)
  • name
  • parent
  1. 组件类型 (更改组件的类型)
  • functional
  1. 模板修改器 (改变模板的编译方式)
  • delimiters
  • comments
  1. 模板依赖 (模板内使用的资源)
  • components
  • directives
  • filters
  1. 组合 (向选项里合并 property)
  • extends
  • mixins
  1. 接口 (组件的接口)
  • inheritAttrs
  • model
  • props / propsData
  1. 本地状态 (本地的响应式 property)
  • data
  • computed
  1. 事件 (通过响应式事件触发的回调)
  • watch
  1. 生命周期钩子 (按照它们被调用的顺序)
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  1. 非响应式的 property (不依赖响应系统的实例 property)
  • methods
  1. 渲染 (组件输出的声明式描述)
  • template / render
  • renderError

前端团队开发规范

HTML规范

  1. 前言
  • HTML 作为描述网页结构的超文本标记语言，在前端一直有着广泛的应用。本文档的目标是使 HTML 代码风格保持一致，容易被理解和被维护。
  1. 代码风格
  1. 缩进与换行
  • 使用 2 个空格做为一个缩进层级。
  • 每行不得超过 120 个字符。
  1. 命名
  • class 必须单词全字母小写，单词间以 - 分隔。
  • class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。
  • 元素 id 必须保证页面唯一。
  • 禁止为了 hook 脚本，创建无样式信息的 class。
  • 同一页面，应避免使用相同的 name 与 id。
  1. 标签
  • 标签名必须使用小写字母。
  • HTML 标签的使用应该遵循标签的语义。
  1. 属性
  • 属性名必须使用小写字母。
  • 自定义属性建议以 xxx- 为前缀，推荐使用 data-。
  1. 图片
  • 禁止 img 的 src 取值为空。延迟加载的图片也要增加默认的 src。
  • 避免为 img 添加不必要的 title 属性。
  • 为重要图片添加 alt 属性。
  • 添加 width 和 height 属性，以避免页面抖动。
  • 有下载需求的图片采用 img 标签实现，无下载需求的图片采用 CSS 背景图实现。
  1. 表单
  1. 控件标题
  • 有文本标题的控件必须使用 label 标签将其与其标题相关联。
  1. 按钮
  • 使用 button 元素时必须指明 type 属性值。
  • 尽量不要使用按钮类元素的 name 属性。
  1. 模板中的 HTML
  • 模板代码的缩进优先保证 HTML 代码的缩进规则。
  • 模板代码应以保证 HTML 单个标签语法的正确性为基本原则
  • 在循环处理模板数据构造表格时，若要求每行输出固定的个数，建议先将数据分组，之后再循环输出。

JavaScript编码规范

  1. 前言
  • JavaScript是前端编码的基础语言。本文档的目标是使 JavaScript 代码风格保持一致，容易被理解和被维护 虽然本文档是针对 JavaScript 设计的，但是在使用各种 JavaScript 的预编译语言时(如 TypeScript 等)时，适用的部分也应尽量遵循本文档的约定。

代码风格

  1. 文件
  • 文件名使用小驼峰命名方式；
  • 在文件结尾处，保留一个空行。
  1. 结构
  1. 缩进
  • 使用 2 个空格做为一个缩进层级；
  1. 空格
  • 二元运算符两侧必须有一个空格，一元运算符与操作对象之间不允许有空格。
  • 用作代码块起始的左花括号 { 前必须有一个空格。
  • if / else / for / while / function / switch / do / try / catch / finally 关键字后，必须有一个空格。
  • 在创建对象时，属性中的 : 之后必须有空格，: 之前不允许有空格。
  • 函数声明、具名函数表达式、函数调用中，函数名和 ( 之间不允许有空格。
  • , 和 ; 前不允许有空格。如果不位于行尾，, 和 ; 后必须跟一个空格。
  • 在函数调用、函数声明、括号表达式、属性访问、if / for / while / switch / catch 等语句中，() 和 [] 内紧贴括号部分不允许有空格。
  • 单行声明的数组与对象，如果包含元素，{} 和 [] 内紧贴括号部分不允许包含空格。
  • 行尾不得有多余的空格。
  1. 换行
  • 每个独立语句结束后必须换行。
  • 每行不得超过 120 个字符。
  • 运算符处换行时，运算符必须在新行的行首。
  • 在函数声明、函数表达式、函数调用、对象创建、数组创建、for 语句等场景中，不允许在 , 或 ; 前换行。
  • 不同行为或逻辑的语句集，使用空行隔开，更易阅读。
  • 在语句的行长度超过 120 时，根据逻辑条件合理缩进。
  1. 语句
  • 不得省略语句结束的分号。
  • 在 if / else / for / do / while 语句中，即使只有一行，也不得省略块 {...}。
  • 函数定义结束不允许添加分号。
  • IIFE 必须在函数表达式外添加 (，非 IIFE 不得在函数表达式外添加 (。
  1. 命名
  • 必须语义化命名，不允许出现无意义的命名。
  • 变量 使用 Camel命名法。
  • 常量 使用 全部字母大写，单词间下划线分隔 的命名方式。
  • 函数 使用 Camel命名法。
  • 函数的 参数 使用 Camel命名法。
  • 类 使用 Pascal命名法。
  • 类的 方法 / 属性 使用 Camel命名法。
  • 枚举变量 使用 Pascal命名法，枚举的属性 使用 全部字母大写，单词间下划线分隔 的命名方式。
  • 命名空间 使用 Camel命名法。
  • 由多个单词组成的缩写词，在命名中，根据当前命名法和出现的位置，所有字母的大小写与首字母的大小写保持一致。
  • 类名 使用 名词。
  • 函数名 使用 动宾短语。
  • boolean 类型的变量使用 is 或 has 开头。
  • Promise对象 用 动宾短语的进行时 表达。
  1. 注释
  1. 单行注释
  • 必须独占一行。// 后跟一个空格，缩进与下一行被注释说明的代码一致。
  1. 多行注释
  • 使用 /.../ 这样的多行注释
  1. 函数/方法注释
  • 函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识。
  • 对 Object 中各项的描述， 必须使用 @param 标识。
  • 对返回的数据描述，必须用 @return 标识。
  • 重写父类方法时， 应当添加 @override 标识。如果重写的形参个数、类型、顺序和返回值类型均未发生变化，可省略 @param、@return，仅用 @override 标识，否则仍应作完整注释。
  1. 类型定义
  • 类型定义都是以 { 开始, 以 } 结束。
  1. 文件注释
  • 文件顶部必须包含文件注释，用 @file 标识文件说明。
  • 文件注释中可以用 @author 标识开发者信息。
  1. 命名空间注释
  • 命名空间使用 @namespace 标识。
  1. 类注释
  • 使用 @class 标记类或构造函数。
  • 使用 @extends 标记类的继承信息。
  • 使用包装方式扩展类成员时， 必须通过 @lends 进行重新指向。
  • 类的属性或方法等成员信息不是 public 的，应使用 @protected 或 @private 标识可访问性。
  1. 事件注释
  • 必须使用 @event 标识事件，事件参数的标识与方法描述的参数标识相同。
  • 在会广播事件的函数前使用 @fires 标识广播的事件，在广播事件代码前使用 @event 标识事件。
  • 对于事件对象的注释，使用 @param 标识，生成文档时可读性更好。
  1. 常量注释
  • 常量必须使用 @const 标记，并包含说明和类型信息。
  1. 复杂类型注释
  • 对于类型未定义的复杂结构的注释，可以使用 @typedef 标识来定义。
  1. AMD 模块注释
  • AMD 模块使用 @module 或 @exports 标识。
  • 对于已使用 @module 标识为 AMD模块 的引用，在 namepaths 中必须增加 module: 作前缀。
  • 对于类定义的模块，可以使用 @alias 标识构建函数。
  • 多模块定义时，可以使用 @exports 标识各个模块。
  1. 语言特性
  1. 变量
  • 变量、函数在使用前必须先定义。
  • 变量必须 即用即声明，不得在函数或其它形式的代码块起始位置统一声明所有变量。
  1. 条件
  • 在 Equality Expression 中使用类型严格的 ===。仅当判断 null 或 undefined 时，允许使用 == null。
  • 条件判断尽量简单，复杂转度小于15.
  • 慎用三元表达式，?不允许出现三次以上。
  1. 循环
  • 不要在循环体中包含函数表达式，事先将函数提取到循环体外。
  • 对循环内多次使用的不变值，在循环外用变量缓存。
  • 对有序集合进行遍历时，缓存 length。
  • 对有序集合进行顺序无关的遍历时，使用逆序遍历。
  1. 字符串
  • 字符串开头和结束使用单引号 '。
  1. 函数
  1. 函数长度
  • 一个函数的长度控制在 50 行以内。
  1. 参数设计
  • 一个函数的参数控制在 6 个以内。
  • 通过 options 参数传递非数据输入型参数。

其它规范参考： github.com/ecomfe/spec…

avatar
文章
阅读
粉丝