西安企业网站建设模板,网站的建设费 账务处理,网页设计页面布局结构,wordpress页面的添加背景音乐前端编程规范是基于原有vue2基础上那套《编码风格及标准》上#xff0c;应用于vue3、typescript、vite2基础上延伸出来的扩展补充#xff0c;持续完善 一、编码规范
ESLint 代码检测工具 Pretter 代码格式化工具配合双校验代码
Git 规范
- 编码工具 vscode 同步参考文档中… 前端编程规范是基于原有vue2基础上那套《编码风格及标准》上应用于vue3、typescript、vite2基础上延伸出来的扩展补充持续完善 一、编码规范
ESLint 代码检测工具 Pretter 代码格式化工具配合双校验代码
Git 规范
- 编码工具 vscode 同步参考文档中的 《编码风格及标准》进行配置这里不再赘述
- 相关配置已生成到业务项目中开发无需过度关注和调试配置有问题群里反馈交流同步解决- 使用 git cz 命令替代 git commit 命令规范代码提交格式
$ npm install -g commitizen4.2.4
- 使用 request merge 发起代码合并请求统一项目代码管理者代码管理者为代码质量负责
- 使用 git flow 命名规范 git 分支管理Git主分支保留分支master、dev● 功能feature分支● 预发布release分支● 修补bughotfix分支1git主分支(master)。它是自动建立用于发布重大版本更新 2git开发主分支(dev)。日常开发在此分支上进行 3git临时性分支用于应对一些特定目的的版本开发(验证OK后应该删除此分支)主要有 *** 功能feature分支** 它是为了开发某种特定功能从Develop分支上面分出来的。开发完成后要再并入Develop。可以采用feature-的形式命名 *** 预发布release分支* 指发布正式版本之前即合并到Master分支之前我们可能需要有一个预发布的版本进行测试 预发布分支是从Develop分支上面分出来的预发布结束以后必须合并进Develop和Master分支。它的命名可以采用release-的形式 *** 修补bughotfix分支* 软件正式发布以后难免会出现bug。这时就需要创建一个分支进行bug修补 修补bug分支是从Master分支上面分出来的。修补结束以后再合并进Master和Develop分支它的命名可以采用hotfix-*的形式
git cz 代码提交格式参考图 实图参考 提示注意若不执行git cz 而是直接执行 git commit 会跑检测代码格式的脚本lint-staaged会对配置的 .jsx、.vue、.tsx、.ts语法格式和规范进行检查若不符合规范如 若解决完错误继续执行 commit 将会提示提交格式不符合规范 so, git cz势在必行那么 look GAME OVER
二、开发规范
es next语法
- 请各位务必使用esnext的语法进行项目开发这一块通过后续 codeReview 及 GroupLeader merge管理vue3 setup options 、.setup script、.jsx 三种模式应用场景 ● 常规情况下推荐使用 setup script方式尽量使用 template 构建视图性能更好 ● 常规无法满足情况下使用 jsx 更加灵活可以使用 jsx 处理数据层 ● 平台中.vue 组件封装本着追溯性完整性可以使用setup options此方式仅限平台使用 1、全局组件管理
- src/compoents
: 全部以 C_开头C_后首字母大写示栗C_Table2、视图、路由、菜单三者命名一致
- src/views src/router /src/store/menu
: views {fileName} router {path} menu {index} 3、js or css
- js 常规驼峰命名见名知意 | css 常规 - 分割命名层级递进scss 中递进通过 -引用
: getDataFn | form-item-input 4、UI组件API 提供的方法
- handler开头驼峰命名 栗handleChange ...5、验证方法
- v_开头栗: v_required6、外部utils工具方法
- d_开头栗d_toUperCaseFirstLetter... 更多命名代码介绍絮絮叨叨后续逐步完善...视图、路由、菜单三者命名一致参考图
- script setup 为栗
1、name请填写在 script langts setup namecomponentName 【views中必填跟参考一致】2、props | defineProps | withDefaults(defineProps())
- props: Type as PropsTypetype
- defineProps: definePropsProps() 该 Props 在当前文件定义
- withDefaults: withDefaults(definePropsProps()) 该 Props 在当前文件定义 【推荐带默认】3、emits | defineEmits
- ?差了啥 HH~4、computed5、methods 所有的方法
- 组件方法 自有方法 async方法6、watch
- beforeMount 的时候可以用来处理数据字典7、onMounted
...1、尽量使用 ref, 避免 reactive的坑多个对象集中管理可以包裹在一个大的reactive响应赋值一定要
- data.obb res // 注意这里的data是一个大的 reactive 对象2、template 或 jsx需要响应处理的数据一定要用 reactive 或 ref 包括推荐 ref
- ref 定义可以跟着自己的代码片段走也可以包裹在一个 useEffect 中script setup语法糖没这必要3、v-model 会爆雷需要使用历史值的时候一个要保证响应式一个要保证历史值是经过深拷贝的4、尽量用 computed 去处理一些 if的表达式逻辑5、如果同层级要监听多个watch可以写在一起如果监听的是一个嵌套对象或者深层次结构一定接的增加
- {deep:true}6、使用 vite2 配置alias要同步在 tsconfig 中配置 path7、特别注意tsx 中使用 slots 的不同参考 table 中的 demo8、特别注意tsx 中使用 jsx 语法替代 renderVNode扩展性更强同时也支持 render建议tsx统一
- 涉及到 dom或vnode碎片的都用 .tsx 来管理 data 数据不涉及 .data.ts 即可9、给子组件传递多属性的时候除了特别定义的常用的 props 接入其他 v-bind$attrs 接入即可10、子组件需要修改父组件的值的时候
- emits 分发事件若需要在分发的事件中需要父组件处理较多依赖逻辑这样推荐
- v-mode:udated 方式子组件需要父组件变更某些状态子组件直接分发父组件无需再监听11、data.ts 的数据若需要依赖的源组件上获取的异步数据来处理一些逻辑
- 将 data.ts 或 data.tsx 中的数据组成变成一个闭包函数通过参数交互12、data.ts 或 data.tsx 中若要把一些异步数据通过 export 传递给 组件引用的 import
- 需要通过 promise.resolve 或者 callback 回调的方式进行传递推荐从源组件传递数据到 data 层13、若 .tsx 方式编写的组件将 defineComponent 中的 optiosn 剥离到 ./options.ts 文件中14、异步和单向数据流的问题
- 异步的数据接收者需要启用 watch 监听数据异步的变化重新渲染注意响应式搜嘎
- 单向数据流的问题避免擅自修改父组件导致多子医引父互相污染这样的数据要双向 watch15、关于注释请同步我们的vscode配置除了自动生成页头注释之外主动添加编码注释// --- 华丽丽瓜瓜线 ---
... 太多了凑空让我慢慢完善吧 ... 培训就着代码实践分享吧, 包括一些封装思路等等...更多的规则代码演示分享
typescript 不要把 typeScript 变成 anyScript数据维护都应使用 tsc 约束 - interface 命名 export interface I_TableColumns {}
: 除了defineProps中的interface之外其他的都定义在 ./types.ts文件中
: defineProps 的 Props 剥离有坑目前不支持已提草案- types 命名export type T_HttpEventT {}- 注意在引用类型文件的时有记得添加 type 标识
: import type {I_TableColumns} from ./types后续持续完善…ing — 未完待续 ---- 后续会用 vitePress 或者 vuePress 来编写框架应用文档将组件集打成lib发布到npm上统一管理后续大家以 Submit contribution 的方式参与集成
