在公司Vue项目中使用的前端编码规范【仅供参考】

「这是我参加2022年第一次更文挑战的第三天。查看活动细节:2022年第一次更文挑战」项目背景前端框架： Vue2全家桶UI框架： Element前端规范缩排 2（tab／空白)变量双引号/单引接口测试号(看个人习惯一长沙师范学院般推荐单引号)大括号和分号要写，可以换行giti就换行。不要用 拖太长路径@ 开头（从 /src 开始计算不接口类型应写相对路径 ../../命名驼峰（A变量与函数PI 来的栏可以保留底线)尽量不要简写(每个人习惯不同，可能看不懂陈思思)views/、com接口类型ponents/接口的作用 档名大写开头:FileName.vue（css）github中文官网网页 自定义数组的定义class 可以命名为 项目名称-xxx 跟UI组件的 clas变量的定义github是干什么的s 尽量写清楚，标明变量名的含义，避免github中文官网免出现 data、payload、re数组公式sult.接口的作用.. 流行词bool 用 isXxx、hasXxx、数组canXxx、shouldXxxfunction 用接口文档动词＋名词(如果变量英语名词)＋过去的动词，变量指针的含义是指监控某件接口crc错误计数事已完成的状态）function举例:fetch：数组和链表的区别从远端（API）获取资料ex：fetchCour变量的指针其含义是指该变量的ses()load：接口的作用从本地端加载数长沙师范学院据ex：loadLangua数组词ge()calculate：计算结果ex：calculateScore()show：变量与函数显示物件ex：showModal()、showDialoGitg()get：（从 stor从山神开始的诸天之旅e）取giti资料set：写资料（进 store）create：创建资料update：更新资料edit：编辑资料remove：将资git命令料之间giti轮胎关系被移除，数据本身仍然存在delete／git命令destroy：将资料删除on：监测子层事件模型档案数组词views长沙市天气/_ViewExample.vuecomponents/_ComponentsExample.vue@/views/_ViewExample.vue<template> <div class=”container”></div></template><sc长生十万年ript>/*eslint-disable no-unused-vars */import { mapState,giti轮胎map数组词多音字组词Getters,mapActi接口crc错误计数ons } from “vuex”;接口自动化/*eslint-enable */export default { metaInfo()接口卡 return { title: “” components: {}, mixins: [], props: [], data() return {}， }， computed: {}, watchgithub中文官网网页: {}, mounted() {}， methods: {}};</script>@/c变量的指针其含义是指该变量的omponents/_ComponentsExample.vue<template> <div>Component Example</div></template><script>/*eslint-disable no-unused-数组指针vars */import { mapState,mapGetters,mapActions } from “vuex”;/*eslint-enable */export default { components: {}, mixins: [], props: [], data() return {}， }， computed: {}, wat数组和链表的区别chGit: {}, mounted() {}， methods: {}};</script><style scopgithub是干什么的ed></style>这两个文件可接口的作用以在新档案中复制粘贴，以保持 components、mixins、pro数组的定义ps、d接口自动化ata… 这些属性gitlab顺序一致，维护焯是什么梗时更容易找到style 一律加 scoped，风格只用于同一个 .vue 文件要全局 clgiti轮胎ass，请放在 Ap接口和抽象类的区别p.vugithub是干什么的e(这接口是什么个辰时是几点到几点不加 scoped）或 @import scss／css其它判断式v-if尽量使用肯定句判断 v-if、显示与否 v-show、属性 type等，逻辑相关，事件写在前面，风格接口自动化＆其他的往后放，修改时更容易找到<el-menu :default-active=”menuIndex” mode=”horizontal” router> <el-menu-item v-for=”(menu,indexGit) in menuList” :key=”index”变量英文 :route=”menu.route” :index=”StrCSSing(index 1)” class=”h长沙市天气idden-sm-and-down” &数组去重gt; 某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某某数组词三声某某某某某某某某某某某某某某某某某某某某某某某 </el-menu-it接口的作用em> <el-menu-item v-if=”isLogin” @click=”logout” index=”6″&gt焯是什么梗; <el-button type=”success” class=”igiti轮胎vy-xxx xx数组公式x”> </el-button> </el-menu-item></el接口英文-menu>切换路径接口文档赋值路径name，不要写字串 “/xxx” ，请使用页面跳转name(路github开放私库径可能会改变，但 name 通常不会变化)this.$router.push({ name: “Home”,});数据初始化时，数字可以给 0，字串给 “”、变量类型有哪些数组给 []…(类型对应github开放私库)github什么是表单信息可以建立 xxFormCSS 安装数据以区分图片上的其他数据exp陈涉世家翻译及原文ort default { data: / xx表单资料 xxForm: { namegiti轮胎: “”, account: “”, password: “”, courseList: newsList: ， }，表单范例如下submit 可触发原生 HTML 的检查机制多一层保障，当然要详细 validate这样做就不用特别绑 了enter 事件(会采取原接口自动化生机制但被拦截)<el-form @submit.prevent.native=”submit”> <el-inp接口是什么ut v-mo接口和抽象类的区别del=”form.n变量是什么意思ame” required></el-input> <el-button native-type=”submit”> submit </el-button>giti</el-form>export default { da接口测试ta() return { form: { name: “”, methods:变量是什么意思 submit() //长沙市天气 validate /变量名的命名规则 call API ， }，if else 过多时改用 switch case 可用于非同步async／await 摊平程式码Gitcommit 可以添加一个类别，让朋友有心理准备，知道giti轮胎用什么观点来查看接口crc错误计数这个变化，仅供参考feature: 新增／修改功能feature: 登入页面＆功能串接document变量值: 文件，注释document: 补充 README.接口文档mdfix: 修改小数组c语言 bugfix: 变量 nameadjust: 小调整(内部调整数组公式，修改后基本没有区别)ref变量是什么意思？actor: 大调整(可能改为接口)、重构和改进Vuex尽量加 namespaced 拆干净按照 state、getters、mutations、actgi变量值thub是干什么的ions 的giti轮胎顺序，维护更容易找到，只能通过 mutations 改变 state在 views 和 components 只能 di接口spatcgiteeh actions、不要直接 commit mutations以 mapState/mapGett陈涉家族翻译及原文ers/mapAc变量tiogithub是干什么的长生十万年ns 取代 thgiti轮胎is.$store.变量值state/return this.github中文官网$store数组排序.getters/this.$stor数组词e.dispatch…mapState/…mapGetters/…mapActions 写在 computed／meGitthods 前面没有注意到API 在 中统一变量英文管理@/apis 下，可以根据后端 controlgitlabler 拆档//举例 user.jsimport ApiService from “@/common/api.service”;export default { login(email,p变量的指针其含义是指该变量的assword) return数组排序 ApiServ变量是什么意思ic接口crc错误计数e.post(“login”,{ email, password,接口卡 }logout() return Api接口测试Servic变量的指针其含义是指该变量的e.post(“logout”); ，}；vuex 的 actions (如果数据共用)// 例 user.modules.jsimport userApi frgithub是干什么的om “@/apis/user”;const actions = { async logout({ commit }) await userApi.logout()；接口自动化 JwtService.destroyToken()； commitgithub是干什么的(“setToken”,null); }；views 或 c变量与函数omponents data 就好)// 举个例子import xxxApi from “@/数组公式apis/xxx”;async mounted() { const res = a变量wait xxxApi.getList(); this.lCSSist = res.data;}总结一下，在项目开始之前，我们必须花时间和朋友一起整理前端代码规范，这样，朋友们一眼就能看到对方的代码，大大git命令提高了工作效率，降低了维度github永久回家地址保护的成本，然后新朋友看到这个详细的代giti轮胎码规范，开始更快。统一的代码规范是定义变量的基础数组去重。我希望每个人写的项目都能长成参天大树，bug少少。Thanks?(??)?