美文网首页
前端开发规范

前端开发规范

作者: 南土酱 | 来源:发表于2023-09-21 09:39 被阅读0次

项目结构规范:

my-project-name/
|- BuildScript    // 流水线部署文件目录
|- docs           // 项目的细化文档目录(可选)
|- nginx          // 部署在容器上前端项目 nginx 代理文件目录
|- node_modules   // 下载的依赖包
|- public         // 静态页面目录
    |- index.html // 项目入口
|- src            // 源码目录
    |- api        // http 请求目录
    |- assets     // 静态资源目录,这里的资源会被wabpack构建
        |- icon   // icon 存放目录
        |- img    // 图片存放目录
        |- js     // 公共 js 文件目录
        |- scss   // 公共样式 scss 存放目录
            |- frame.scss   // 入口文件
            |- global.scss  // 公共样式
            |- reset.scss   // 重置样式
    |- components     // 组件
    |- plugins        // 插件
    |- router         // 路由
    |- routes         // 详细的路由拆分目录(可选)
        |- index.js
    |- store          // 全局状态管理
    |- utils          // 工具存放目录
        |- request.js // 公共请求工具
    |- views          // 页面存放目录
    |- App.vue        // 根组件
    |- main.js        // 入口文件
    |- tests          // 测试用例
    |- .browserslistrc// 浏览器兼容配置文件
    |- .editorconfig  // 编辑器配置文件
    |- .eslintignore  // eslint 忽略规则
    |- .eslintrc.js   // eslint 规则
    |- .gitignore     // git 忽略规则
    |- babel.config.js // babel 规则
    |- Dockerfile // Docker 部署文件
    |- jest.config.js
    |- package-lock.json
    |- package.json // 依赖
    |- README.md // 项目 README
    |- vue.config.js // webpack 配置

文件命名规范:
Vue.js命名风格指南(易记版) - 掘金 (juejin.cn)

js 接口命名:

附: 函数方法常用的动词:
get 获取/set 设置,
add 增加/remove 删除,
create 创建/destory 销毁,
start 启动/stop 停止,
open 打开/close 关闭,
read 读取/write 写入,
load 载入/save 保存,
begin 开始/end 结束,
backup 备份/restore 恢复,
import 导入/export 导出,
split 分割/merge 合并,
inject 注入/extract 提取,
attach 附着/detach 脱离,
bind 绑定/separate 分离,
view 查看/browse 浏览,
edit 编辑/modify 修改,
select 选取/mark 标记,
copy 复制/paste 粘贴,
undo 撤销/redo 重做,
insert 插入/delete 移除,
add 加入/append 添加,
clean 清理/clear 清除,
index 索引/sort 排序,
find 查找/search 搜索,
check out 签出/check in 签入,
submit 提交/commit 交付,
push 推/pull 拉,
expand 展开/collapse 折叠,
enter 进入/exit 退出,
abort 放弃/quit 离开,
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

git 提交规范

描述
feat 新增一个功能
fix 修复一个 Bug
docs 文档变更
style 代码格式(不影响功能,例如空格、分号等格式修正)
refactor 代码重构
perf 改善性能
test 测试
build 变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等)
ci 更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes:Travis, Circle 等
chore 变更构建流程或辅助工具
revert 代码回退

代码提交错分支还未push的时候:

# 1. 回滚提交 reset, 将最近一次提交放回暂存区, 并取消此次提交.
$ git reset HEAD~1

# 2. 将被跟踪的内容stash,即暂时将未提交的变化移除,稍后再移入
$ git stash

# 3. 创建并切换到新分支
$ git checkout -b dev-myname

# 4. 将stash的内容pop出来
$ git stash pop

# 5. 重新commit
$ git add 多个文件名用空字符隔开
$ git commit -m "提交信息"
$ git push origin dev-myname 

js代码写法规范

在高性能js一书中提到:
  str = ‘a’ + ‘b’+'c' 会出现临时的字符串在内存中

建议用 
str += 'a'
str += 'b'
str += 'c'
来避免多一个 'abc'的临时字符串

github 访问加速
上万良心软件都在GitHub,你却还卡在无法访问?(Github加速访问教程) - 知乎 (zhihu.com)

相关文章

  • 移动前端开发规范(一般规范)

    系列目录 移动前端开发规范(一般规范)移动前端开发规范(技术栈规范)移动前端开发规范(HTML规范)移动前端开发规...

  • 前端入门必知开发规范

    本文主要从以下几个方面来概述前端的开发规范 1. 目录构建规范 2. 前端命名规范 3. 前端工作规范 4. 开发...

  • web前端的开发规范比较重要的知识点

    本文主要从以下几个方面来概述前端的开发规范 1. 目录构建规范 2. 前端命名规范 3. 前端工作规范 4. 开发...

  • 好程序员web前端分享前端的开发规范

    本文好程序员主要从以下几个方面来概述前端的开发规范 1.目录构建规范 2.前端命名规范 3.前端工作规范 4.开发...

  • 前端规范

    常用html、CSS、javascript前端命名规范无论是从技术角度还是开发视角,对于web前端开发规范文档都有...

  • 前端开发规范

    前端代码规范 Front Standard Guide 前端 JS 项目开发规范 规范的目的是为了编写高质量的代码...

  • 前端工程涉及八个比较大的分类:

    组织架构:前端开发规范和架构设计,包括模块化/组件化开发模型、开发框架、目录规范、组织形式等。 工程部署:有关前端...

  • 前端规范

    前端规范 规范说明 此为前端开发团队遵循和约定的代码书写规范,意在提高代码的规范性和可维护性。此规范为参考规范,统...

  • 前端架构之路(3) - 前端开发规范

    前端开发规范 1. 为什么需要 “前端开发规范” 规范不是强制性的,对代码的编写和程序的运行不会有致命的问题,但是...

  • web 前端开发规范

    web 前端开发规范 web 前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率...

网友评论

      本文标题:前端开发规范

      本文链接:https://www.haomeiwen.com/subject/kzjgvdtx.html