关于前端构建项目的规范
关于前端构建项目的规范
一、前端目录构建规范的作用
目的是与项目开发的目录结构保持一致,便于项目的构建与管理。
二、资源分类
1、源代码资源
指开发者编写的源代码,包括html、css、template等
2、内容资源
指希望作为内容提供给访问者的资源,包括图片、字体、flash、pdf等,最常用的应该就是readme.md文件
三、目录命名规则
1、简洁 有习惯性的缩写单词,采用容易理解的缩写。如源代码目录src,不要写成source
2、常用的一些文件名称
img:图片 不要使用image、images、imgs等
js:JavaScript脚本 不要使用script、scripts等
css:样式表 不要使用style、styles等
swf:flash 不要使用flash等
src:源文件目录 不要使用source等
dep:第三方依赖包 不要使用lib、library、dependency等
注意:不允许出现复数形式,如imgs、deps是不允许的。
四、根目录的划分
根目录下按照职能进行划分,不允许将资源类型或者业务逻辑的目录划分到根目录下。
根目录下常用的文件如下:
src
test
doc
dep
五、业务逻辑划分src目录结构
业务项目的src目录内,绝大多数情况应该根据业务逻辑划分目录结构。
业务逻辑下常用的文件如下:
utils
common
components
routers
assets
api
store
view
static
vue的命名规范
组件的data必须是一个函数
为 v-for
设置键值
避免 v-if
和 v-for
用在一起
prop定义尽量详细
尽量使用组件化开发思想: 提高开发效率 方便重复使用 提升整个项目的可维护性 便于协同开发 低耦合。
vue文件方法声明顺序
注释
编码规范
命名规范
oocss (书写规范)
OOCSS不是一个框架,也不是一种技术,更不是一种新的语言,他只不过是一种方法,一种书写方式,换句话说OOCSS其核心就是用最简单的方式编写最整洁,最于净的CSS代码,从而使代码更具重用性,可维护性和可扩展性 ( 把原本写在一起的样式, 拆开多个class 写,提高可复用性)。