前端开发规范[项目工程篇]

最新推荐文章于 2024-11-11 23:50:26 发布

原创最新推荐文章于 2024-11-11 23:50:26 发布 · 2.6k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#项目工程 #前端工程 #开发规范 #前端开发规范 #规范

禅あ思之研发管理专栏收录该内容

47 篇文章

订阅专栏

本文详细阐述了项目工程规范，包括文件命名、注释、存放位置、框架与工具规范等内容，旨在提升代码可读性和项目维护效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目工程规范

1. 文件命名规则

文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。

命名规范：参考 Code Guide
- 全部采用小写方式，以下划线分隔。例：my_project_name
- 完整英文命名的用复数形式，缩写用单数形式。例：scripts, js, styles, css, images, img
模块化分组规范：参考静态脱敏前端工程
文件大小约束

2. 文件注释

文件注释用于告诉不熟悉这段代码的读者这个文件中包含哪些东西。应该提供文件的大体内容, 它的作者, 依赖关系和兼容性信息。如下:

    /**
     *@功能说明
     *@作者
     *Copyright *******      
     */

3. 文件存放位置规范

以静态前端项目为例

|-- FE/                      # 应用主目录
   |-- dist                 # 前端发布打包生成的目录
   |-- logs                 # mock本地开发服务生成的日志目录
   |-- mock                 # mock本地开发目录
   |-- public               # 静态文件目录（打包时直接复制到dist目录下）
   |-- src/                 # 开发目录
       |-- assets/          # 主要存放一些静态图片资源的目录
           |-- ...
       |-- components/      # 这里存放的是开发需要的的各种组件，各个组件联系在一起组成一个完整的项目。
           |-- ...
       |-- filters/         # 项目过滤器目录
           |-- ...
       |-- lib/             # 项目公共类或函数目录
           |-- ...
       |-- plugins/         # 项目公共插件目录
           |-- ...
       |-- router/         # 项目路由目录
           |-- ...
       |-- styles/         # 项目样式目录
           |-- ...
       |-- views/          # 项目视图目录
           |-- ...
       |-- App.vue         # 是项目主组件，也是项目所有组件和路由的出口，之后它会被渲染到项目根目录的 index.html 中显示出来，我们可以在这里写一些适合全局的css样式。
       |-- main.js         # 入口文件，引入了vue模块和app.vue组件以及路由router，我们需要在全局使用的一些东西也可以定义在这里面。

   |-- babel.config        # ES6语法编译配置
   |-- .editorconfig       # 代码编写规格
   |-- .eslintignore       # 项目的根目录中创建文件来告诉ESLint忽略特定的文件和目录，该文件是纯文本文件
   |-- .eslintrc.js        # eslint的配置文件，eslint是用来管理和检测js代码风格的工具，可以和编辑器搭配使用，如vscode的eslint插件，当有不符合配置文件内容的代码出现就会报错或者警告
   |-- .gitignore          # 忽略的文件。
   |-- postcssrc.js        # 兼容选项（如果已经安装postcss，需要一大堆loader配置，这时项目根目录会生成“.postcssrc.js”文件）。
   |-- .browserslistrc     # 浏览器css兼容选项
   |-- package.json        # 项目及工具的依赖配置文件。
   |-- README.md           # 项目说明。
   |-- vue.config          # 项目构建的配置文件

本地开发完成后，把构建好的文件（dist）传到服务器相应的位置就好了。（构建的时候要处理好文件路径引用）。如果是集成到spring boot 中，请参考Vue项目部署到sping boot 方案

4 框架、工具规范

项目结构规范包括文件、目录命名规范，模块化分组规范，组件化规范等等，这些规范有些是构建工具要求的，有些是团队自己定的。
* 目录结构的统一化，可读性，分模块、组件构建，严禁构建杂乱无章，毫无可读性而言的项目目录。
* 了解开发当前项目所需的框架，工具、插件，功能，兼容性，分辨率等问题做好准备工作，做到心中有数。
* 目录结构整齐划一，方便日后的维护和其他同事的阅读。
* 在技术上，每个团队都有框架选型，都遵循一定的规范协作。基本上从团队搭建之初便需要定下今后团队的技术选型，并且最好不要更改选定好的框架和 UI 库，因为不同的框架、不同的 UI 库一般相互之间是不兼容的；同时用多个框架或 UI 库也是要尽量避免的。