项目规范化开发
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
其他规范
维护相关规范
js
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
js
.......
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
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
0 条评论
下一页
