前端项目目录结构规范

前前端端项项目目目目录录结结构构规规范范

简简介介

该文档主要的设计 目标是项 目开发的目录结构保持一致,使容易理解并方 构建与管理。

要要求求

在本文档中,使用的关键字会以中文+括号包含的关键字英文表示:必须(MUST) 。关键字"MUST", "MUST NOT", "REQUIRED",

"SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL"被定义在rfc211 中。

规规范范说说明明约约定定

以下规范文档中:

1. 项 目包含但不限于业务项 目和包项 目。

2. ${root}表示项 目的根 目录。

资资源源分分类类

资源分成两大类:

1. 源代码资源:指开发者编写的源代码,包括js、html、css、template等。

2. 内容资源:指希望做为内容提供给访问者的资源,包括图片、字体、flash、pdf等。

目目录录命命名名原原则则

1. 简洁。有习惯性缩写的单词 必须(MUST) 采用容易理解的缩写。如:源代码 目录使用src,不使用source。下面是更多例

子:

1. img: 图片。 不允许 (MUST NOT) 使用image、images、imgs等。

2. js: j avascript脚本。 不允许 (MUST NOT) 使用script、scripts等。

3. css: 样式表。 不允许 (MUST NOT) 使用style、styles等。

4. swf: flash。 不允许 (MUST NOT) 使用flash等。

5. src: 源文件 目录。 不允许 (MUST NOT) 使用source等。

6. dep: 引入的第三方依赖包 目录。 不允许 (MUST NOT) 使用lib、library、dependency等。

2. 不允许 (MUST NOT) 使用复数形式。如:imgs、docs是不被允许的。

目目录录划划分分

${root}目目录录结结构构划划分分

在${root}下,目录结构 必须(MUST) 按照职能进行划分, 不允许 (MUST NOT) 将资源类型或业务逻辑划分的目录直接置于${root}

下。

常用的目录有src、doc、dep、test等。详细请参考一级 目录详细说明

${root}/

src/

test/

doc/

dep/

...

业业务务项项 目目目目录录结结构构划划分分

业务项 目的${root} 目录结构划分遵循${root} 目录结构划分。

项项 目目代代号号

前前端端项项目目目目录录结结构构规规范范

业务项 目 可以(SHOULD) 为项 目起一个代号名称。代号名称 必须(MUST) 为一个单词,不宜过长。例:北斗的项 目代号

为triones,哥伦布的项 目代号为clb,百度锦囊的项 目代号为jn。项 目代号有利于区分不同项 目,为未来项 目之间的重用留下扩

展的后路。

在项 目开发时,通常会使用如下加载器配置,将项 目代号指向src。

{

baseUrl: '${docroot}',

paths: {

'triones': 'src'

}

}

根根据据业业务务逻逻辑辑划划分分src目目录录结结构构

业务项 目的src目录内,绝大多数情况 应当(SHOULD) 根据业务逻辑划分 目录结构。划分出的子 目录 (比如例子中的biz1)我们称

为业务 目录。

src下 必须(MUST) 只包含业务 目录与common目录。业务公共资源 必须(MUST) 命名为common。common目录做为业务公共资源的目

录,也视如业务 目录。

${root}/

src/

common/

biz1/

subbiz1/

subbiz2/

biz2/

较小规模的业务项 目 (如投放端),src目录允许视如业务 目录,直接按照业务 目录划分原则划分 目录结构。

${root

html 项目 目录架构,前端项目目录结构规范.pdf相关推荐

  1. 尚硅谷VUE项目实战,前端项目-尚品汇

    001-尚硅谷-尚品汇-教程简介_哔哩哔哩_bilibili 需要的知识点   搭建vue-router pages文件夹放置路由页面 router文件夹配置路由 回到入口文件注册(main.js) ...

  2. 项目体系架构设计——基于Spark平台的协同过滤实时电影推荐系统项目系列博客(四)

    系列文章目录 初识推荐系统--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(一) 利用用户行为数据--基于Spark平台的协同过滤实时电影推荐系统项目系列博客(二) 项目主要效果展示--基 ...

  3. Vue入门之Web端CURD前端项目示例

    Vue入门之Web端CURD前端项目示例 随着vue.js越来越火,很多不太懂前端的小伙伴想要入坑.而入坑最好的办法就是上手实际操作,因此本文将重点放在实际操作上,对理论不做过多解释,不明白的地方小伙 ...

  4. 有哪些适合新手练手的前端项目?

    学习编程专栏连载编程新手练手项目系列之前端项目篇,同样也欢迎热爱学习.对Java感兴趣的朋友学习翻阅上三两篇内容.(连载系列的项目整理以后会在每个月进行一次重新整理,也欢迎大家进行项目的投稿,投稿请私 ...

  5. Android 金融类项目模块化架构

    一.前言 在以往的开发中,我们通常会使用MVC的模式进行开发,这样导致了Activity处理的逻辑非常的复杂,而且耦合度非常高,代码结构混乱.层次不清,各业务技术方案不统一,冗余代码充斥项目的各个角落 ...

  6. Jenkin前端项目部署----远程服务

    jenkin前端项目部署----远程服务 Publish Over SSH(Jenkins插件).linux服务器的nginx配置.存放位置 文章目录 jenkin前端项目部署----远程服务 前言 ...

  7. Vue前端项目部署在tomcat

    第一步 配置java环境,下载tomcat后解压,然后将webapps里的默认文件删掉 第二步 修改vue项目下config/index.js,注意dev和build都要改assetsPublicPa ...

  8. linux php 上级目录,Linux目录架构详解_php

    linux和Windows操作系统的显著区别之一就是目录架构的不同.Linux操作系统的目录架构遵循文件系统层级结构标准.不知你是否使用ls命令浏览过Linux的根目录"/",亲爱 ...

  9. Linux目录架构详解

    Linux和Windows操作系统的显著区别之一就是目录架构的不同.Linux操作系统的目录架构遵循文件系统层级结构标准.不知你是否使用ls命令浏览过Linux的根目录"/",亲爱 ...

最新文章

  1. Facebook 田渊栋:NeurIPS 2020 中了两篇,感觉还算不错
  2. cad打印样式ctb丢失_CAD制图软件中如何设置CAD打印样式表(CTB)?
  3. 如何按 value 对 dictionary 进行排序?
  4. Java ResourceBundle getLocale()方法与示例
  5. [转载] python docopt_比较Python命令行解析库– Argparse,Docopt和Click
  6. AJAX初始化combox 并取值
  7. 随手记-----cookie
  8. JSON.parse与eval
  9. Android签名概述
  10. secureCRT快捷粘贴操作
  11. python学得好、进监狱进的快_最经典的100部美剧,看到第一名瞬间服气!
  12. Ubuntu关闭开机自启动服务
  13. 利用WebView加载HTML代码时解决图片正常显示
  14. 固态硬盘、机械硬盘工作原理和区别(内附接口知识)
  15. 经典文献阅读之--Cam2BEV
  16. 建设商城网站需要注意事项_建设商城网站流程_OctShop
  17. OpenCV计算机视觉编程篇三《处理图像的颜色》
  18. 从零开始构建PHP版mud游戏(二)
  19. 盘点十大GIS相关算法
  20. 不在沉默中爆发就在沉默中死亡,处于沉寂状态的 Emotet 僵尸网络是怎样卷土重来的?(一)

热门文章

  1. html 搜索页面模板,SVG+HTML5 搜索界面模板
  2. 打开WIFI软件JAVA_java – 以编程方式打开wifi网络共享
  3. 网络靶场实战-记一次大型内网渗透实践 【完结篇】
  4. beta冲刺总结-咸鱼
  5. MAC上安装brew
  6. 视频教程-Excel 2016培训教程-Office/WPS
  7. 计算机监控系统设备安装的是,计算机监控系统设备安装质量检查表.docx
  8. 用友U8和旺店通·企业奇门单据接口对接
  9. Mybatis(十)多个学生对一个老师的查询
  10. 幸福公寓(仿爱情公寓同居交友) 源码免费发布