HTML规范1、语义化标签列表使用 ul li文字使用 p span em cite 等标签标题使用 h1 h2 等标签布局使用 section aside header footer article 等 HTML5 布局标签2、自定义标签使用自闭合标签的写法 小写加下划线 3、多特性分行写为提高可读性 组件应用时换行 按照 ref、class、传入、传出 顺序书写 4、行内使用表达式在模版中 简单情况使用表达式 复杂情况使用计算属性或函数 ... ... 5、避免重复避免过多重复代码 果超过三行类似的代码 配置数据再循环遍历 6、代码嵌套根据元素嵌套规范 每个块状元素独立一行 内联元素可选 7、活用 v-if v-showv-show 不会改变dom树 不会导致重新渲染 用于频繁的切换显示隐藏v-if 会改变dom树 会导致重新渲染 用于只控制一次显示隐藏 8、注释规范 ... CSS规范1、避免使用避免使用标签选择器 因为在 Vue 中 特别是在局部组件 使用标签选择器效率特别低 损耗性能 建议需要的情况直接定义非特殊情况下 禁止使用 ID 选择器定义样式（有 JS 逻辑的情况除外）避免使用important选择器避免大量的嵌套规则 控制在3级之内 对于超过4级的嵌套 考虑重写或新建子项避免使用ID选择器及全局标签选择器防止污染全局样式2、推荐使用提取公用样式进assets文件styles里 按模块/功能区分使用 scoped 关键字 约束样式生效的范围可复用属性尽量抽离为页面变量 易于统一维护使用混合（mixin）根据功能定义模块 然后在需要使用的地方通过 @include 调用 避免编码时重复输入代码段3、书写顺序CSS 属性书写顺序 先决定定位宽高显示大小 再做局部细节修饰 定位属性(或显示属性 display) => 宽高属性 => 边距属性(margin padding) => 背景 颜色 字体等修饰属性的定义 这样定义为了更好的可读性 让别人只要看一眼就能在脑海中浮现最终显示的效果 .class-name { position: fixed; top: 100px; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: 100%; margin: 10px; padding: 10px; background-color: red; border-radius: 2px; font-size: 14px; color: #000; line-height: 1.42;} 4、样式覆盖组件内部需要覆盖UI框架样式 必须在最外层组件加类名 5、注释规范以 / 注释内容 / 格式注释 前后空格 嵌套子类需要一个回车分割开 /* 注释内容 */.class-name { width: 20px; /* 这里需要换行 */ .class-name-l { color: blue }} JS规范1、用法规范在vue-cli 脚手架使用架自带的指向 src 开发目录的 '@' 符号引入文件资源使用 template 或计算属性规避 v-if 和 v-for 用在一起统一使用单引号坚持单一原则 函数内仅做该函数应该做的 尽量避免通过传入标记控制不同行为优先考虑三目运算符 但不要写超过3层的三目运算符对于无用代码必须及时删除 例如：一些调试的 console 语句、无用的弃用功能代码请求数据的方法使用try catch 错误捕捉 注意执行回调2、组件顺序规范 3、注释规范函数/方法注释必须包含函数说明，有参数和返回值时必须使用注释标识，它的作者, 依赖关系和兼容性信息。 单行注释：双斜线后应跟空格，且缩进与上下文的代码保持一致；或在行尾注释，在行尾依然需要左右空格// 注释const userID = 24const userID = 12 // 注释 多行注释：一般用于注释难以理解的、可能存在错误的、逻辑强的代码，且缩进一致/* * 针对下方代码的说明 * 第一行太长写第二行 */const aa = 1 函数注释：写明传入参数名称、类型推荐完整注释以下格式/** * @Description 加入购物车 * @Author luochen_ya * @Date 2024-03-13 * @param {Number} goodId 商品id * @param {Array} specs sku规格 * @param {Number} amount 数量 * @param {String} remarks 备注 * @returns 购物车信息 */apiProductAddCard = (goodId, specs, amount, remarks) => { return axios.post('***', { goodId, specs, amount, remarks })} 文件注释：写明文件描述/** * @Description: 文件描述 * @Author: luochen_ya * @Date: 2024-03-13 */ 命名规范1、目录命名按照小驼峰命名 首字母小写 项目文件夹：projectName样式文件夹：css / scss脚本文件夹：js2、图片命名图片就是img开头 图标就是icon开头 img_功能_模块_编号icon_功能_模块_编号3、文件命名按照小驼峰命令 英文单词过长或超出2个以上 可缩略至前四位 列如：comming_soon.png 等有复数含义 采用复数命名 列如：minixs styles images icons 等静态资源命名格式为小写 + 下划线 列如：icon_arrow.png img_logo.png 等组件命名为小驼峰 公用组件加上gd前缀 列如：gdOwnerComponents 等4、方法命名method 方法命名不同于文件命名，尽量完整英文命名，语义表达需完整清楚 按照小驼峰命名法 可使用常见动词约定can： 判断是否可执行某个动作 函数返回一个布尔值 true可执行 false不可执行has： 判断是否含有某个值 函数返回一个布尔值 true含有此值 false不含有此值is： 判断是否为某个值，函数返回一个布尔值 true为某个值 false不为某个值get： 获取某个值 函数返回一个非布尔值set： 设置某个值 无返回值或者返回是否加载完成的结果语义化英文命名 仅组件内部使用方法前加上_（下划线）区分 引入组件：首字母大写的驼峰法命名import MyOwnerComponents from '@/components/MyOwnerComponents' 变量：使用驼峰式命名 优先使用 let const 避免使用 varlet userName = 'luochen_ya'const userInfo = { name: 'luochen_ya', age: 24} 常量：字母全部大写 以下横线 _ 划分const Constant = { // 公用状态 COMMON_STATUS_ENABLE = 1, // 启用 COMMON_STATUS_DISABLE = 2, // 停用} 5、样式命名class命名以小写字母开头 小写字母、中划线和数字组成 以下是一些常用到的的名字 包裹层: .xxx-wrap列表: .xxx-list列表项: .xxx-list-item左边内容: .xxx-left中间内容: .xxx-middle右边内容: .xxx-right某个页面：.xxx-page6、常用词常用动词get => 取值set => 给值add => 新增remove => 移除show => 显示hide => 隐藏view => 查看browse => 浏览edit => 修改save => 保存delete => 删除find => 查询undo => 撤销redo => 重做clean => 清除index => 索引observe => 观察send => 发送receive => 接收refresh => 刷新synchronize => 同步常用缩写object => objarray => arrfunction => fnmessage => msgbutton => btn工程结构1、目录构建├── api 所有api接口├── assets 靜態資源│ ├── fonts 全局公用字体│ ├── icons 全局公用图标│ ├── images 全局公用图片│ └── styles 全局公用样式├── components 公用組件│ ├── base 基础组件│ └── business 业务组件├── constants 常量 统一管理├── locales 多语言管理├── plugins 插件 统一管理├── router 路由 统一管理│ └── index.js ├── store vuex 统一管理│ ├── modules │ ├── getters.js │ └── index.js ├── utils 工具函数 统一管理├── views 视图目录（所有业务逻辑的页面） 2、代码风格可以直接使用eslint 强制统一代码规范 还能规避一些语法错误 或者按照以下自己定义的去配置eslint来使用以下是个人习惯 仅供参考 首行缩进2空格js代码去除分号html代码超出255字符一行进行换行操作js代码统一使用单引号或双引号 作者：luochen_ya链接：https://juejin.cn/post/7345666534997901366