关于前端构建项目的规范

关于前端构建项目的规范
一、前端目录构建规范的作用

目的是与项目开发的目录结构保持一致，便于项目的构建与管理。

二、资源分类

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 写，提高可复用性）。