前端代码规范（阿里） --- Vue
一、Vie编码基础
vue项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）中的A规范为基础
(一) 组件规范
1、组件名为多个单词
组件名应该始终是多个单词的，且命名规范为 KebabCase格式
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
正例：
export default {name: 'TodoItem',...
}
反例：
export default {name: 'Todo',// ...
}Vue.component('todo', {// ...
})
2、组件名称为 pascal-case 格式
正例：
my-component.vue
反例：
myComponent.vue
3、为基础文件名为 base开头，使用完整单词
正例：
base-button.vue
反例：
MyButton.vue
4、和父组件紧密契合的子组件以父组件名为前缀名
父组件：todo-list.vue
正例：
todo-list-item.vue
todo-list-button.vue
反例：
todoItem.vue
程序员写好看的代码，不亚于写一行好看的字
好看的代码总是让人心旷神怡，
不好，不规范的代码，让人看了想说mmp，
那我们就来学习一下规范的代码怎么写的吧
以下来自B站的学习视频：前端必备-阿里大厂前端开发规范！
5、在 template 模板中使用组件，应使用 PascalCase 模式，并且使用自闭合组件
正例：
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/><!-- 在 DOM 模板中 或者 在所有地方 -->
<my-component></my-component>
反例：
<!-- 在单文件组件和字符串模板中 -->
<myComponent/>
6、组件的 data 必须是一个函数。
正例：
// In a .vue file
export default {data () {return {foo: 'bar'}}
}
反例：
export default {data: {foo: 'bar'}
}
7、Props定义应该尽量详细
- 命名：使用cameCase驼峰命名
- 必须指定类型
- 必须加上注释，表明其含义
- 必须加上
require或者default，两者二选一 - 如果业务需要，必须加上
validator验证
正例：
props: {// 组件状态，用于控制组件的颜色status: {type: String,required: true,validator: function (value) {return {'succ','info','error'}.indexOf(value) !== -1}}
}
8、为组件样式设置作用域
写CSS样式时，加上 作用域 scope
正例：
<stype scoped>.btn-close {font-size: 16px;}
</style>
9、如果特性元素过多，应主动换行
正例：
<MyConponent foo="a" bar="b"baz="z" />
(二) 模板中使用简单的表达式
组件模板中应该只包含简单的表达式，如果有复杂的表达式，应该使用计算属性或法
正例：
<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {normalizedFullName: function () {return this.fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)}).join(' ')}
}
(三) 指令使用缩写形式
指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。
(四) 标签顺序保持一致
<template>...</template>
<script> ... </script>
<style> ... </style>
(五) script标签内部解构顺序
components --> props --> data --> computed --> watch --> filter --> 钩子函数 --> methods
前端代码规范（阿里） --- Vue相关推荐
- 前端代码规范，vue 代码规范
一.规范目的 对于一个团队来说,制定统一的规范是有必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码的工作效率,使代码保持统一的代码风格,以便于代码整合和后期维护. 二.HTML/CS ...
- 前端代码规范网站推荐
京东凹凸实验室前端代码规范 https://guide.aotu.io/ 链接 腾讯前端代码规范 链接http://tgideas.qq.com/doc/index.html 百度前端代码规范文档 链 ...
- 技术胖前端代码规范秘籍推荐
技术胖前端代码规范秘籍推荐 6个文档 ,一本书籍 ,2个工具 京东凹凸实验室前端代码规范 腾讯前端代码规范 百度前端代码规范 JavaScript Standard Style :是一个个人代码规范 ...
- 小团队的前端代码规范
前端代码规范 文章目录 前端代码规范 1 前言 2 命名规范 1) 项目命名 2 )目录命名 3)`javaScript` 文件命名 4)`CSS`,`less`文件命名 5)HTML文件命名 6) ...
- 前端代码规范网址导航（总结）
在大公司代码规范是非常重要的一件事情,多人协作,还有代码评审.所以能写出漂亮的代码非常重要. 这就好比你自己在家,无论是穿大裤衩子,还是背心,甚至是光膀子,都没人管你.但你要出门去约会,就要把最好的一 ...
- [Client]前端代码规范 及 最佳实践
前端代码规范 及 最佳实践 2014/10/29 | 分类: WEB前端, 工具与资源, 开发 | 0 条评论 | 标签: 代码规范, 前端开发, 最佳实践 分享到: 62 本文作者: 伯乐在线 - ...
- 【必看】前端代码规范
代码规范 1. 概述 欢迎使用品优购代码规范, 这个是pink老师借鉴京东前端代码规范,组织的品优购内部规范(任何前端开发项目都适用的).旨在增强团队开发协作.提高代码质量和打造开发基石的编码规范, ...
- 网站开发之前端代码规范
前端代码规范 前言 一.唯一定律 二.前段代码规范 (一)命名规范 1.1.项目命名 1.2 .目录命名 1.3.文件存放位置 1.4.JS.CSS.HTML.PNG 等文件命名 1.4.命名严谨性 ...
- 前端代码规范工具ESLint和Prettier
前端代码规范工具ESLint和Prettier 1. ESLint是什么? ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建 ...
- 前端代码规范参考和如何保持前端代码规范
1.前端代码规范参考 编写前端代码规范的主要驱动力是两方面: 1) 代码一致性(一个项目的代码看起来就像一个人写的一样) 2) 最佳实践. 通过保持代码风格和传统的一致性,我们可以减少遗留系统维护 ...
最新文章
- 2015年10月15日作业
- Android之四大组件(AIDL Service的使用)
- Theme.NoTitleBar问题
- linux 使用jstack_案例解析：线程池使用不当导致的系统崩溃
- 使用nextInt()等接受输入时必须注意换行符的输入
- ABP入门系列（21）——切换MySQL数据库
- android lru进程队列,Android缓存机制——LruCache
- 调整Linux磁盘分区大小
- node.js安装详细教程
- PP苹果助手 v2.3.0 官方版
- Python爬虫抓取网站模板的完整版实现
- nginx源码准备 - Linux C++网络编程（五）
- Android笔记：使用Glide加载图片刷新时会闪烁
- mysql 将数据导出成excel文件(.xls格式)
- 手把手教你获得电信公网ipv6
- 7、KNN（K近邻）
- 智能工厂：怎样服装ERP软件的价格距离这么大？
- 三款ANI光标漏洞蠕虫病毒专杀工具及两个补丁
- Google面试题（java）—有四个线程1、2、3、4。线程1的功能就是输出1，线程2的功能就是输出2，以此类推.........现在有四个文件ABCD
- 数字推盘游戏java_最强大脑数字推盘游戏-最强大脑数字推盘游戏官方版 v1.0预约_手机乐园...