

首页  思维导图  详情



项目规范化开发

2019-06-04 10:35:31   0  举报





仅支持查看

AI智能生成

项目规范化开发

前端项目规范

前端规范

前端开发

模版推荐

作者其他创作

大纲/内容

常见兼容问题

移动端调试

常用优化手段

开发体验优化

使用环境变量和模式对开发、预发和生产环境的进行不同配置，本地开发、上预发或上线前毋需手动修改相关配置（防止忘记修改引发线上事故），仅需运行相应指令。依据最小代价原则和风险规避原则，常用指令默认为上线结果，如npm run build默认为线上代码打包

postscc-px2rem自动将px转成rem，毋需手动计算

自动化，例如自动引入模块，毋需手动引入

模板化，通过脚本生成组件

......

打包结果优化

代码分割

路由懒加载

异步组件

公共模块提取

代码压缩

gzip压缩

tree shaking

cdn

......

用户体验优化

首屏loading、骨架屏，自动首屏注入

pwa、workbox离线存储

开发规范

html

html模板

语义化

其他规范

维护相关规范

css

推荐BEM

其他规范

维护相关规范

es5、es6+、尝试使用typescript

注释相关，例如文件需有头注释、函数必须有使用注释等

其他规范

维护相关规范

readme

规范readme书写及内容

维护相关规范

wiki

维护项目相关wiki

目录结构规范

commit message

Angular规范

commit时进行校验，不通过无法提交代码

eslint强校验，校验不通过无法提交代码

code review

online review

使用gitlab的merge request

1、通过Create New Merge Request创建一个merge request

2、指定源分支与目标分支

3、指定Assignee（审核人，review你代码的同事）,禁止指定自己，可设置合并后删除分支的选项在合并完成后删除源分支，控制分支总数

4、使用Submit Merge Request提交合并请求

5、进行code review

offline review

mobile or PC

移动端还是PC端，移动端需考虑适配方案、PC端需考虑ie兼容等

MPA or SPA

单页应用还是多页应用

技术选型

主技术

jQuery\zepto

vue

react

angular

ReactNative

ssr

小程序

PWA

Flutter

辅助技术

项目脚手架

Vue CLI

维护基于Vue CLI脚手架

状态管理

vuex

模块分割

自动模块扫描

网络请求

路由管理

vue-router

路由分割

自动路由扫描

网络请求

axios

二次封装

请求响应封装

get\post\put\delete

登录拦截

数据过滤

断网处理

请求重试

图片上传

请求loading

维护二次封装网络请求库

CSS预处理器

scss

reset

常用mixin

常用function

常用动画

全局变量

维护常用样式库，包括reset、动画、mixin等

代码格式检查

eslint

standard

airbnb

prettier

维护eslint代码检查规则

pre-commit代码格式检查

UI组件库

nutui

维护常用基础组件库

业务组件库

维护常用业务组件库

单元测试框架

Mocha + Chai

数据mock

esay-mock、Smock

打包工具

webpack

开发

维护基本webpack开发配置文件

预发

维护基本webpack预发配置文件

生产

维护基本webpack生产配置文件

项目结构

dist

打包后生成的文件

node_modules

项目依赖

public

静态资源

毋需打包，例如favicon.ico、html模板等

index.html

维护一个html模板，包括常用meta标签

src

api

后端api请求，依赖我们封装的网络请求库发起请求

assets

img

维护常用图标及图片

css

.......

components

公共组件，按文件夹组织，采用短横线分割命名

example-component

index.js

组件入口

example-component.vue

example-component.scss

通过脚本自动生成初始组件

维护生成初始组件脚本

config

公共配置

directives

vue指令

维护常用指令

filters

vue过滤器

维护常用过滤器

mixin

vue混入

维护常用混入

plugins

公共插件

维护常用插件，类似awesome-vue

router

index.js

vue-router主入口，自动路由扫描，组装模块并导出

维护自动扫描脚本

example

index.js

store

index.js

vuex主入口，自动模块扫描，组装模块并导出

维护自动扫描脚本

actions.js

跟级别action

mountains.js

根级别mountain

modules

vuex模块

通过脚本自动生成初始模块

维护生成初始模块脚本

styles

公共样式

维护常用公共样式

animation

常用动画

mixin

常用mixin

function

常用function

reset.scss

样式重置

variable.scss

全局变量

index.scss

全局公用样式入口，可在webpack中配置全局可见，毋需手动引入

views

页面视图组件，按文件夹组织，采用短横线分割命名

通过脚本自动生成视图组件

维护生成视图组件脚本

example-view

index.js

组件入口

example-view.vue

components

页面组件依赖的非公共组件

error-page

错误页面

维护常见错误页面

401

404

500

utils

常用工具库

维护类似lodash、underscore、30-seconds-of-code的工具库

rem.js

移动端适配

dom.js

常用dom操作，参考jquery、zepto

date.js

常用日期操作，参考moment.js

cache.js

缓存相关操作，包括localStorage、sessionStorage、cookie等

......

request

网络请求封装

维护网络请求库，基于axios二次封装

mock

数据mock

需后端配合

test

单元测试

Mocha + Chai

.browserslistrc

在不同的前端工具间共享目标浏览器

维护相关配置文件

.editorconfig

统一代码风格

维护相关配置文件

.eslintrc.js

代码检查配置文件

维护相关配置文件

.gitignore

git忽略文件

维护相关配置文件

.huskyrc

阻止错误的 git 提交

检查commit message的规范性

检查代码规范性

维护相关配置文件

babel.config.js

代码转换规则

维护相关配置文件

package.json

维护相关配置文件

package-lock.json

postcss.config.js

css转换规则

维护相关配置文件

README.md

项目说明，必须详细

维护相关书写规范

vue.config.js

vue-cli配置文件

维护相关配置文件

.env

开发环境全局变量

,env.yufa

预发环境全局变量

.env.prod

生产环境全局变量

架构评审

项目搭建完毕后进行架构评审

git工作流

git flow、github flow

 Collect

Get Started

git代码分支管理规范

 Collect

Get Started

前端模块化开发

 Collect

Get Started

开发规范

 Collect

Get Started

项目开发协作流程





0 条评论

下一页