前端代码——前端代码规范(含html、css、javascript、vue等)

函数描述 * * @param {string} p1

参数1的说明 * @param {string} p2

参数2的说明，⽐较长 *

那就换⾏了. * @param {number=} p3

参数3的说明（可选） * @return {Object}

返回值描述 */function foo(p1, p2, p3) { let p3 = p3 || 10; return { p1: p1, p2: p2, p3: p3 };}命名规范使⽤ Camel 命名法。运算符不要使⽤约相等运算符，使⽤=强相等运算符同理使⽤!==其他：⼀个请求时，使⽤.then()function request(){ getDataList().then(res => { (res); })}多个请求时，使⽤async/awaitasync function request(){ const res1 = await getDataList1(); const res2 = await getDataList2();}Vue 代码规范常规当在组件中使⽤ data 属性的时候 (除了 new Vue 外的任何地⽅)，它的值必须是返回⼀个对象的函数 data() { return {…} }。prop 的定义应该尽量详细，⾄少需要指定其类型。export default { prop: [ data: { type: Array, default() { return [] } } ]}布尔类型的 attribute， 为 true 时直接写属性值。不要在computed中对vue变量进⾏操作。应该优先通过 prop 和事件进⾏⽗⼦组件之间的通信，⽽不是 this.$parent 或改变 prop。在组件上总是必须⽤ key 配合 v-for，以便维护内部组件及其⼦树的状态。v-if 和 v-for 不能同时使⽤公共⽅法尽量不要挂到原型上, 可以写在 utils ⽂件，也可以使⽤ mixin ⽂件。不要将业务公共组件注册到全局。不要将任何第三⽅插件挂载到 vue 原型上。具有⾼度通⽤性的⽅法，要封装到 libs、全局组件或指令集⾥。为组件样式设置作⽤域。尽量使⽤指令缩写。vuexState (opens new window)为单⼀状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这⾥定义了，在 vue的组件中才能获取你定义的这个对象的状态。修改 state 中数据必须通过 mutations。每⼀个可能发⽣改变的 state 必须同步创建⼀条或多条⽤来改变它的 mutations。服务端获取的数据存放在 state 中，作为原始数据保留，不可变动。Getters (opens new window)有点类似 的计算属性，当我们需要从 store 的 state 中派⽣出⼀些状态，那么我们就需要使⽤getters，getters 会接收 state 作为第⼀个参数，⽽且 getters 的返回值会根据它的依赖被缓存起来，只有 getters 中的依赖值（state 中的某个需要派⽣状态的值）发⽣改变的时候才会被重新计算。通过 getters 处理你需要得到的数据格式，⽽不是通过修改 state 原始数据。组件内不强制使⽤ mapGetters，因为你可能需要使⽤ getter 和 setter。改变 state 的唯⼀⽅法就是提交 mutations (opens new window)。组件内使⽤ mapMutations 辅助函数将组件中的 methods 映射为 调⽤。命名采⽤ ⼤写字母 + 下划线 的规则。定义 CLEAR，以确保路由切换时可以初始化数据。Actions页⾯重的数据接⼝尽量在 actions (opens new window)中调⽤。服务端返回的数据尽量不作处理，保留原始数据。获取到的数据必须通过调⽤ mutations 改变 state。Modules通常情况下按照页⾯划分 modules (opens new window)。默认内置了 system 保证了脚⼿架的基础功能。每个页⾯模块或页⾯的⼦模块添加属性 namespaced: true。⽂件命名规则Component所有的Component⽂件都是以⼤写开头 (PascalCase)，这也是官⽅所推荐的。所有的Component⽂件都是以⼤写开头 (PascalCase)，这也是官⽅所推荐的。但除了 。例⼦：@/components/BackToTop/@/components/Charts/@/views/example/components/ ⽂件所有的.js⽂件都遵循横线连接 (kebab-case)。例⼦：@/utils/@/views/svg-icons/@/components/MarkdownEditor/s在views⽂件下，代表路由的.vue⽂件都使⽤横线连接 (kebab-case)，代表路由的⽂件夹也是使⽤同样的规则。例⼦：@/views/svg-icons/@/views/svg-icons/使⽤横线连接 (kebab-case)来命名views主要是出于以下⼏个考虑。横线连接 (kebab-case) 也是官⽅推荐的命名规范之⼀ ⽂档views下的.vue⽂件代表的是⼀个路由，所以它需要和component进⾏区分(component 都是⼤写开头)页⾯的url 也都是横线连接的，⽐如/export-excel，所以路由对应的view应该要保持统⼀没有⼤⼩写敏感问题代码格式化⼯具使⽤prettier插件进⾏开发代码检测⼯具使⽤eslint插件进⾏开发安装ESlint插件安装并配置完成 ESLint 后，我们继续回到 VSCode 进⾏扩展设置，依次点击 ⽂件 > ⾸选项 > 设置 打开 VSCode 配置⽂件,添加如下配置{ "ve": "off", "te": [ "javascript", "javascriptreact", "vue-html", { "language": "vue", "autoFix": true } ], "": "onSave", "xOnSave": true}

2023年6月21日发(作者：)

前端代码——前端代码规范（含html、css、javascript、vue等）前端代码规范代码提交规范每次提交代码时，commit按规范进⾏备注，如：本次提交新增了新功能：feat: 新增xx功能codefeat: msgfix: msgmerge: msgdocs: msgstyle: msgrefactor: msgtest: msgchore: msgrm: msgpod: msginfo新功能feature修复bugmerge⽂档修改格式，不影响代码运⾏的变动重构即不是新增功能，也不是修改bug的代码变动增加测试构建过程或辅助⼯具的变动删除⽂件或代码pod install / pod update podNameHTML规范1. 普通标签使⽤⼩写，外部引⼊的组件标签使⽤⼤写