前端开发规范：代码风格与模板结构详解

前端开发规范对于提升代码质量和团队协作效率至关重要。本文主要关注以下几个关键知识点： 1. **代码风格与缩进**： - **强制性规定**：采用四个空格作为每个缩进层级，避免使用制表符，确保代码整洁且一致。 - **单行长度限制**：每个代码行的长度不超过120个字符，这有助于提高代码可读性，减少垂直滚动。 2. **文件结构限制**： - **模块书写顺序**：推荐按照 `template`、`script`、`style` 的顺序编写，这样的结构有助于分层管理组件逻辑和样式。 - **template 根节点规则**： - 模板根节点应只有一个直接子节点，不支持以下情况：空模板、文本内容、多个元素、循环、嵌套模板、`v-if` 无`v-else`对等条件。 3. **自定义组件和标签命名**： - 自定义组件标签名必须是HTML未定义的，且至少由两个单词组成，遵循kebab-case（如`customComponent`）的命名规范。 - 避免使用HTML预定义标签作为组件名，如`<template>`。 4. **HTML标签规范**： - HTML元素需正确闭合，除非是`<input>`这种特殊的void元素。 - 非根节点的`template`标签内必须至少包含一个子节点，如`<ul><template><li></li><li></li></template></ul>`。 - `template`标签不应带有`key`属性，因为它主要用于Vue的优化，直接使用在DOM中可能会导致问题。 这些规范旨在提供清晰、简洁和可维护的前端代码结构，降低误解和冲突的风险，同时也有利于IDE的自动提示和代码审查。遵循这些规则能帮助开发者编写出更高效、易于理解的前端代码，从而提升项目整体质量。