前端代码——前端代码规范（含html、css、javascript、vue等）前端代码规范
代码提交规范
每次提交代码时，commit按规范进⾏备注，如：本次提交新增了新功能：feat: 新增xx功能
code info
feat: msg新功能feature
fix: msg修复bug
merge: msg merge
docs: msg⽂档修改
style: msg格式，不影响代码运⾏的变动
refactor: msg重构即不是新增功能，也不是修改bug的代码变动test: msg增加测试
chore: msg构建过程或辅助⼯具的变动
rm: msg删除⽂件或代码
pod: msg pod install / pod update podName
HTML规范
1. 普通标签使⽤⼩写，外部引⼊的组件标签使⽤⼤写
<div></div>
<el-button><el-button>
<Pagination />
2. 属性的定义，统⼀使⽤双引号。
<input type="text"name="title"/>
3. 有下载需求的图⽚采⽤ img 标签实现，⽆下载需求的图⽚采⽤ CSS 背景图实现
产品 logo、⽤户头像、⽤户产⽣的图⽚等有潜在下载需求的图⽚，以 img 形式实现，能⽅便⽤户下载
⽆下载需求的图⽚，⽐如：icon、背景、代码使⽤的图⽚等，尽可能采⽤ css 背景图实现
4. 为图⽚添加 alt 属性，提⾼图⽚加载失败时的⽤户体验
<img src="#"alt="这是⼀张图⽚"/>
5. 为图⽚添加 width 和 height 属性，以避免页⾯抖动
<img src="#"alt="#"width="#"height="#">
CSS规范
前缀规范
1. class命名
class 必须单词全字母⼩写，单词间以 - 分隔（例如，.btn 和 .btn-danger）。
避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。
class 名称应当尽可能短，并且意义明确。
2. CSS命名规范(规则)常⽤的CSS命名规则
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏⽬：column
页⾯外围控制整体佈局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
⼴告：banner
页⾯主体：main
热点：hot
新闻：news
下载：download
⼦导航：subnav
菜单：menu
⼦菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签：tags
⽂章列表：list
提⽰信息：msg
⼩技巧：tips
栏⽬标题：title
加⼊：joinus
指南：guide
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
JavaScript规范
注释
原则
As short as possible（如⽆必要，勿增注释）：尽量提⾼代码本⾝的清晰性、可读性。
As long as necessary（如有必要，尽量详尽）：合理的注释、空⾏排版等，可以让代码更易阅读、更具美感。
单⾏注释
必须独占⼀⾏。// 后跟⼀个空格，缩进与下⼀⾏被注释说明的代码⼀致。
多⾏注释
避免使⽤ /…/ 这样的多⾏注释。有多⾏注释内容时，使⽤多个单⾏注释。
函数/⽅法注释
1. 函数/⽅法注释必须包含函数说明，有参数和返回值时必须使⽤注释标识。；
2. 参数和返回值注释必须包含类型信息和说明；
/**
* 函数描述
*
* @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 =>{
console.log(res);
})
javascript说明
}
多个请求时，使⽤async/await
async 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、全局组件或指令集⾥。
为组件样式设置作⽤域。
尽量使⽤指令缩写。
vuex
State (opens new window)为单⼀状态树，在 state 中需要定义我们所需要管理的数组、对象、字符串等等，只有在这⾥定义了，在 vue 的组件中才能获取你定义的这个对象的状态。
修改 state 中数据必须通过 mutations。
每⼀个可能发⽣改变的 state 必须同步创建⼀条或多条⽤来改变它的 mutations。
服务端获取的数据存放在 state 中，作为原始数据保留，不可变动。
Getters (opens new window)有点类似 vue.js 的计算属性，当我们需要从 store 的 state 中派⽣出⼀些状态，那么我们就需要使⽤getters，getters 会接收 state 作为第⼀个参数，⽽且 getters 的返回值会根据它的依赖被缓存起来，只有 getters 中的依赖值（state 中的某个需要派⽣状态的值）发⽣改变的时候才会被重新计算。
通过 getters 处理你需要得到的数据格式，⽽不是通过修改 state 原始数据。
组件内不强制使⽤ mapGetters，因为你可能需要使⽤ getter 和 setter。
改变 state 的唯⼀⽅法就是提交 mutations (opens new window)。
组件内使⽤ mapMutations 辅助函数将组件中的 methods 映射为 storemit 调⽤。
命名采⽤ ⼤写字母 + 下划线 的规则。
定义 CLEAR，以确保路由切换时可以初始化数据。
Actions
页⾯重的数据接⼝尽量在 actions (opens new window)中调⽤。
服务端返回的数据尽量不作处理，保留原始数据。
获取到的数据必须通过调⽤ mutations 改变 state。
Modules
通常情况下按照页⾯划分 modules (opens new window)。
默认内置了 system 保证了脚⼿架的基础功能。
每个页⾯模块或页⾯的⼦模块添加属性 namespaced: true。
⽂件命名规则
Component
所有的Component⽂件都是以⼤写开头 (PascalCase)，这也是官⽅所推荐的。
所有的Component⽂件都是以⼤写开头 (PascalCase)，这也是官⽅所推荐的。
但除了 index.vue。
例⼦：
@/components/BackToTop/index.vue
@/components/Charts/Line.vue
@/views/example/components/Button.vue
JS ⽂件
所有的.js⽂件都遵循横线连接 (kebab-case)。
例⼦：
@/utils/open-window.js
@/views/svg-icons/require-icons.js
@/components/MarkdownEditor/default-options.js
Views
在views⽂件下，代表路由的.vue⽂件都使⽤横线连接 (kebab-case)，代表路由的⽂件夹也是使⽤同样的规则。
例⼦：
@/views/svg-icons/index.vue
@/views/svg-icons/require-icons.js
使⽤横线连接 (kebab-case)来命名views主要是出于以下⼏个考虑。
横线连接 (kebab-case) 也是官⽅推荐的命名规范之⼀ ⽂档
views下的.vue⽂件代表的是⼀个路由，所以它需要和component进⾏区分(component 都是⼤写开头)
页⾯的url 也都是横线连接的，⽐如admin/export-excel，所以路由对应的view应该要保持统⼀
没有⼤⼩写敏感问题
代码格式化⼯具
使⽤prettier插件进⾏开发
代码检测⼯具
使⽤eslint插件进⾏开发
安装ESlint插件
安装并配置完成 ESLint 后，我们继续回到 VSCode 进⾏扩展设置，依次点击 ⽂件 > ⾸选项 > 设置 打开 VSCode 配置⽂件，添加如下配置
{
"files.autoSave":"off",
"eslint.validate":[
"javascript",
"javascriptreact",
"vue-html",
{
"language":"vue",
"autoFix":true
}
],
"eslint.run":"onSave",
"eslint.autoFixOnSave":true
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。