前端项目目录结构规范
前端打包命名规则
前端打包命名规则一、为什么需要命名规则前端打包是网站开发过程中的重要环节，它将多个文件打包成一个或多个文件，以减小文件数量、提高加载速度和减少请求次数。
在进行前端打包时，命名规则的制定十分重要，它能够帮助开发者更好地管理文件，提高项目的维护性和可读性。
二、命名规则的制定1.文件命名在进行前端打包时，文件命名应该简洁明了，有意义。
避免使用过长、含义模糊的文件名，推荐使用小写字母、短横线或者下划线进行单词分割。
比如：home-page.js,about-us.css。
2.目录结构前端打包涉及到多个文件和文件夹的管理，因此目录结构也需要有一定的规范。
通常建议按照功能或模块划分目录，避免出现过深的嵌套结构。
3.版本管理在进行前端打包时，版本管理也是一个非常重要的环节。
每次更新文件时，需要对文件进行版本管理，以便追踪文件的变更历史。
通常采用在文件名或者路径中添加版本号的方式，比如：app-v1.0.0.js。
4.命名约定制定一些命名约定也是非常有必要的。
比如：约定文件名前缀或者后缀表示文件的类型、功能或者状态。
另外，约定一些特殊的命名规则，比如：约定一些特定文件名表示在打包过程中需要进行特殊处理。
三、命名规则的好处1.提高可读性良好的命名规则能够提高项目的可读性，使得开发者能够更快地定位文件和功能。
2.提高维护性规范的命名规则能够提高项目的维护性，使得项目的扩展和维护更加容易。
3.降低出错率规范的命名规则能够降低出错率，减少因为文件命名不规范而引发的问题。
四、总结前端打包命名规则的制定是开发过程中非常重要的一个环节。
通过良好的命名规则，能够提高项目的可读性、维护性和降低出错率。
因此，开发者在进行前端打包时，应该严格遵守命名规则，制定合理的约定和规范。
这样能够为项目的开发和维护提供更好的支持。
Vue前端开发规范
Vue前端开发规范本来来⾃Vue 开发规范⽬录及说明本⽂档为前端 vue 开发规范规范⽬的命名规范结构化规范注释规范编码规范CSS 规范规范⽬的为提⾼团队协作效率便于后台⼈员添加功能及前端后期优化维护输出⾼质量的⽂档命名规范为了让⼤家书写可维护的代码，⽽不是⼀次性的代码让团队当中其他⼈看你的代码能⼀⽬了然甚⾄⼀段时间时候后你再看你某个时候写的代码也能看普通变量命名规范命名⽅法：驼峰命名法命名规范：1. 命名必须是跟需求的内容相关的词，⽐如说我想申明⼀个变量，⽤来表⽰我的学校，那么我们可以这样定义 const mySchool = "我的学校" ;2. 命名是复数的时候需要加s,⽐如说我想申明⼀个数组，表⽰很多⼈的名字，那么我们可以这样定义 const names = new Array() ;常量命名⽅法 : 全部⼤写命名规范 : 使⽤⼤写字母和下划线来组合命名，下划线⽤以分割单词。
const MAX_COUNT = 10const URL = 'https:///'组件命名规范官⽅⽂档推荐及使⽤遵循规则：PascalCase (单词⾸字母⼤写命名)是最通⽤的声明约定kebab-case (短横线分隔命名) 是最通⽤的使⽤约定组件名应该始终是多个单词的，根组件 App 除外有意义的名词、简短、具有可读性命名遵循 PascalCase 约定1. 公⽤组件以 Abcd (公司名缩写简称) 开头，如（ AbcdDatePicker,AbcdTable ）2. 页⾯内部组件以组件模块名简写为开头，Item 为结尾，如（ StaffBenchToChargeItem，StaffBenchAppNotArrItem ）使⽤遵循 kebab-case 约定1. 在页⾯中使⽤组件需要前后闭合，并以短线分隔，如（，）导⼊及注册组件时，遵循 PascalCase 约定同时还需要注意：必须符合⾃定义元素规范: 切勿使⽤保留字。
web项目标准目录结构
web项目标准目录结构一、根目录。
在web项目的根目录下，通常会包含一些与项目整体相关的文件和目录，例如项目的配置文件、文档、资源文件等。
在这个级别上，通常会包含以下几个重要的目录和文件：1.1 config目录。
config目录通常用来存放项目的配置文件，例如数据库配置、路由配置、权限配置等。
这样可以将配置文件与代码分离，方便项目的维护和部署。
1.2 docs目录。
docs目录通常用来存放项目的文档，包括需求文档、设计文档、接口文档等。
良好的文档可以帮助团队成员更好地理解项目的需求和设计，提高项目的开发效率和质量。
1.3 public目录。
public目录通常用来存放项目的静态资源文件，例如图片、样式表、脚本文件等。
这些文件可以被直接访问，因此通常会放在public目录下。
1.4 src目录。
src目录通常用来存放项目的源代码文件，包括后端代码、前端代码等。
在src 目录下通常会包含多个子目录，用来组织不同功能模块的代码。
1.5 test目录。
test目录通常用来存放项目的测试代码，包括单元测试、集成测试等。
良好的测试代码可以帮助保证项目的质量和稳定性。
二、src目录。
在src目录下，通常会包含项目的源代码文件。
一个良好的目录结构可以让项目的代码更易于维护和扩展。
在src目录下通常会包含以下几个重要的目录和文件：2.1 api目录。
api目录通常用来存放项目的接口文件，包括后端接口、前端接口等。
良好的接口设计可以提高项目的可扩展性和可维护性。
2.2 components目录。
components目录通常用来存放项目的组件文件，包括可复用的UI组件、业务组件等。
良好的组件设计可以提高项目的代码复用性和开发效率。
2.3 pages目录。
pages目录通常用来存放项目的页面文件，包括前端页面、后端页面等。
在pages目录下通常会包含多个子目录，用来组织不同功能模块的页面。
2.4 utils目录。
utils目录通常用来存放项目的工具文件，包括通用的工具函数、常量定义等。
WEB前端开发代码使用要求规范
WEB前端开发代码使用要求规范1.编码规范- 使用标准的HTML、CSS和JavaScript语法。
-使用缩进和空格来提高代码的可读性。
-使用注释来解释代码的目的和功能。
2.文件和目录结构规范-使用有意义的文件和目录命名，方便其他开发人员寻找代码。
-在项目中使用统一的目录结构，例如将HTML文件存放在一个文件夹中，将样式文件存放在另一个文件夹中，以此类推。
3.HTML规范- 避免在HTML中直接写入样式和脚本代码，应将样式和脚本代码分离到对应的CSS和JavaScript文件中。
4.CSS规范-使用适当的选择器，避免过多的嵌套。
-避免使用内联样式，应将样式写在CSS文件中，以提高可维护性。
- 使用合适的样式命名规则，例如使用BEM(Block-Element-Modifier)命名规则，或其他约定俗成的命名规则。
5. JavaScript规范-使用合适的变量和函数命名，提高代码的可读性。
-避免使用全局变量，应将变量和函数封装在模块中。
- 使用严格模式(`use strict`)，避免不规范的语法和行为。
- 避免使用`eval`和`with`等不安全的代码。
-在循环中使用合适的终止条件，避免死循环。
6.代码结构规范-代码应具有良好的组织结构，例如使用模块化的方式来组织代码。
-尽量遵循单一职责原则，每个函数和类应该只负责一件事情。
-提取重复的代码块，封装成函数或类，以提高代码的复用性。
-不要写过长的函数或类，应该根据需要进行拆分和重构。
7.注释规范-使用注释来解释代码的目的和功能，特别是代码的复杂部分。
-注释应该清晰、简洁，方便其他开发人员理解代码。
-避免使用无用的注释，注释应该随着代码的变化而更新。
总之，遵守WEB前端开发代码使用要求规范能够提高代码的质量和开发效率，减少错误和维护成本。
同时，还能提高团队合作的效率，方便其他开发人员理解和修改代码。
因此，在进行WEB前端开发时应该积极遵守和推崇相关规范。
前端开发设计规范文档
前端开发设计规范文档一、引言二、代码编写规范1.缩进和空格-使用2个空格作为一个缩进层级。
- 在每个关键词或运算符后添加一个空格，如if (condition) {}。
-每行代码的末尾都应该去掉多余的空格。
2.行长限制每行代码应控制在80个字符以内，避免过长的代码行导致代码难以阅读和理解。
3.注释-使用注释来解释代码的意图和逻辑。
-使用单行注释（//）来注释一行代码，使用多行注释（/*...*/）来注释一段代码。
-注释要保持与代码同步，当代码发生修改时，注释也应随之更新。
4.变量和函数命名- 使用驼峰命名法（camelCase）命名变量和函数。
变量和函数名应该清晰明确，能够准确表达其含义。
-避免使用缩写和简写，除非是常见的缩写或简写形式。
5.常量命名-使用全大写字母和下划线的命名方式命名常量。
-常量名要具有描述性，能够清晰表达其含义。
6.字符串引号-使用双引号（""）包裹字符串，避免使用单引号（''）。
7.条件判断和循环语句-在条件判断和循环语句中使用花括号（{}）包裹代码块，即使只有一行代码。
8.数据类型转换-使用严格相等运算符（===）进行数据类型和值的比较，避免使用弱相等运算符（==）。
三、组织结构规范1.文件和文件夹命名-文件和文件夹命名应该清晰明确，能够准确表达其内容。
-文件和文件夹的命名应使用小写字母、短划线和数字的组合，避免使用空格和特殊字符。
2.目录结构前端项目应该按照一定的目录结构进行组织，常见的目录结构如下：- src：项目源代码目录。
- assets：用于存放静态资源文件，如图片、字体等。
- styles：存放样式文件。
- scripts：存放脚本文件。
- pages：存放页面组件。
四、性能优化规范1.文件合并和压缩-将多个CSS和JS文件合并为一个文件，并进行压缩。
-使用工具和插件进行自动化合并和压缩操作。
2.图片优化- 使用适当的图像格式，如JPEG、PNG、WebP等，以提高图像加载速度。
前端开发规范文档
前端开发规范文档规范目的为提高团队协作效率，便于后端开发人员添加功能及前端后期优化维护，输出高质量的代码，特制定该文档。
本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。
本文档如有不对或者不合适的地方请及时提出。
经讨论决定后方可更改。
基本准则符合web标准，语义化html，结构表现行为分离，兼容性优良。
页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。
一、html 文件命名及编写规范1、命名规则采用小写英文字母|| _的组合命名，菜单名_功能名称，后缀.html。
如：manage_list.html（管理列表）、manage_add.html（新增）、manage_edit.html（修改）、manage_detail.html（详情）。
同时将页面放在其对应的模块划分目录中。
2、编写规范：(1)文档类型声明及编码统一为html5声明类型“<!DOCTYPE html>”;(2)编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;(3)区域块、功能组件以及需要标注的地方，插入注释。
(4)在布局文件结构时，应遵循语义化标签（该用p不要用div、该用ul、li不要用p，h标签应根据标题层级合理利用）、代码结构简单、清晰明了，少用标签、少套结构（一段结构布局中 1个标签能解决的不要用2个，套2层结构能解决的不要套3层）的基本原则。
代码标签、结构嵌套示例：目标效果图代码结构嵌套<ul><li><h4>罗田县九资河徐冲药材</h4><img src=”***.jpg”><div><h3>茯苓</h3><p>小丁</p><p class=”color_red”>32元/公斤</p></div></li></ul>代码分析：根据目标效果图，实现的代码部分别使用了ul/li /h4/ img /div /h3/ p 这些标签。
vue 目录结构
vue 目录结构Vue一款由尤雨溪提出的前端框架，它使用起来易于学习，可以实现快速构建Web应用程序。
Vue目录结构是基于Node.js模块化规范的CommonJS，即require（）/exports（）/module.exports的模块加载方式。
下面，就来介绍一下Vue的目录结构。
一、Vue的根目录Vue的根目录指的是Vue安装后在本地的根目录，一般是位于“node_modules/vue”下，在这个目录下有八个文件和一个文件夹： 1. index.js文件，是Vue的核心文件，最重要的模块，它提供了Vue的主要功能，包括变量声明，属性访问，模板渲染，触发事件等。
2. vue.esm.js文件，是Vue的核心文件的ESM版本，可以使用ES6模块化引入Vue。
3. vue.runtime.esm.js文件，是Vue的核心文件的运行时的ESM 版本。
4. vue.global.js文件，是Vue的核心文件的全局版本，它可以在浏览器环境下直接使用。
5. bundle.esm.js文件是Vue的核心文件的ESM版本，它包含了Vue、Vuex和Vue Router。
6. package.json文件是Vue的package文件，它里面记录了Vue 的版本、依赖等信息。
7. LICENSE文件是Vue的许可证文件。
8. README.md文件是Vue的readme文件，记录了Vue的使用方法。
9. dist文件夹是Vue的发布文件夹，里面包含了Vue的发布版本文件。
二、Vue的资源文件夹Vue的资源文件夹指的是在Vue的根目录下的assest文件夹，它包含了Vue的样式文件、图片文件、字体文件等。
1. fonts文件夹，是Vue的字体文件夹，用来存放字体文件，如：TTF字体文件等。
2. images文件夹，是Vue的图片文件夹，用来存放图片文件，如：JPG、PNG文件等。
3. styles文件夹，是Vue的样式文件夹，用来存放css文件，如：less文件、sass文件等。
WEB前端开发规范
WEB前端开发规范WEB前端开发规范WEB前端开发规范目录1、规范目的2、基本准则3、文件规范4、文件规范5、html书写规范6、css书写规范7、JavaScript书写规范8、图片规范9、注释规范10、开发及测试工具约定11、其他规范12、CSSHack1规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。
本文档如有不对或者不合适的地方请提出来,基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范3.1、html,css,js,images文件均归档至约定的目录中;23 3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。
例如：我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如：微博改版版块名称_时间日期.cssnew_blog_1212.css4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4html书写规范4.1、文档类型声明及编码:统一用;编码统一为。
目的:统一性和网站提高开发合作效率。
4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。
4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
前端项目目录结构规范
目录命名原则
1.简洁。
有习惯性缩写的单词必须采用容易理解的缩写。
例如：
1.img：图片。
2.js：javascript脚本。
3.css：样式表。
4.swf：flash。
5.src：源文件目录。
6.dep：引入的第三方依赖包目录。
2.不可以使用复数形式。
如：imgs、docs。
目录划分
根目录结构划分
在根目录下，目录结构必须按照职能进行划分。
常用的目录：
$(root)/
src/
test/
doc/
dep/
…
业务项目目录结构划分
项目代号
业务项目可以为项目起一个代号名称，代号名称必须为一个单词，不宜过长。
项目代号有利于区分不同的项目，为项目的重用留下后路。
在项目开发是，通常会使用如下加载配置项，将项目代号指向src。
根据业务逻辑划分src目录结构
业务项目的src目录内，绝大多数情况应当根据业务逻辑划分目录结构。
划分出的子目录，成为业务目录。
Src下必须只包含业务目录与common目录。
业务公共资源必须命名为common。
Common目录作为业务公共资源的目录，也视如业务目录。
$(root)/
src/
common/
biz1/
subbiz1/
subbiz2/
biz2/
较小规模的业务目录（如投放端），src目录允许视如业务目录，直接按照业务目录划分原则划分目录结构。
$(root)/
src/
foo.js
业务目录划分原则
1.JS资源不允许按资源类型目录划分目录，必须按业务逻辑划分目录。
JS
资源应直接置于业务目录下。
即：业务目录下不允许出现js目录。
2.除JS资源外的源文件资源，当资源数量较多时，为方便管理，允许按资
源划分目录。
即：业务目录下允许出现css、tpl目录。
3.内容资源允许按资源类型划分目录。
即：业务目录下允许出现img、swf、
font目录。
4.业务目录中，如果文件太多不好管理，需要划分子目录时，也必须继续
遵守根据业务逻辑划分的原则，划分子业务。
通常，对于一个业务目录，鼓励将业务相关的源文件资源都直接置于业务目录下。
biz/
img/
add_button.png
add.js
add.tpl.html
add.css
业务目录下源文件资源数量较多时，我们第一直觉应该是：是否业务划分不够细？是否应该划分子业务，建立子业务目录？
biz2/
subbiz1/
list.js
list.tpl.html
list.css
subbiz2/
遇到确实是一个业务整体，无法划分子业务时，允许将非JS资源按资源类型划分目录进行管理。
biz1/
css/
add.css
edit.css
remove.css
img/
add_button.png
tpl/
add.html
edit.html
remove.html
add.js
edit.js
remove.js
源文件资源和内容资源请参考资源分类章节，常用资源目录请参考资源目录章节，常用业务目录请参考业务目录章节。
业务项目目录划分示例
${root}/
src/
common/
img/
sprites.png
logo.png
conf.js
layout.css
biz1/
img/
add_button.png
add.js
add.tpl.html
add.less
biz2/
subbiz1/
list.js
list.tpl.html
list.css
subbiz2/
dep/
er/
src/
test/
esui/
src/
test/
test/
doc/。