Vue命名规范
views 命名
views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。
views 下的文件夹命名
- views 下面的文件夹代表着模块的名字
- 由名词组成(car、order、cart)
- 单词只能有一个(good: car order cart)(bad: carInfo carpage)
- 尽量是名词(good: car)(bad: greet good)
- 以小写开头(good: car)(bad: Car)
views 下的 vue 文件命名
- views 下面的 vue 文件代表着页面的名字
- 放在模块文件夹之下
- 只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 Login Home
- 尽量是名词
- 大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
- 名字至少两个单词(good: CarDetail)(bad: Car)
- 常用结尾单词有(Detail、Edit、List、Info、Report)
- 以 Item 结尾的代表着组件(CarListItem、CarInfoItem)
vue 方法命名
vue 方法放置顺序
- components
- props
- data
- created
- mounted
- activited
- update
- beforeRouteUpdate
- metods
- filter
- computed
- watch
method 自定义方法命名
- 动宾短语(good:jumpPage、openCarInfoDialog)(bad:go、nextPage、show、open、login)
- ajax 方法以 get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
- 事件方法以 on 开头(onTypeChange、onUsernameInput)
- init、refresh 单词除外
- 尽量使用常用单词开头(set、get、open、close、jump)
- 驼峰命名(good: getListData)(bad: get_list_data、getlistData)
data props 方法注意点
- 使用 data 里的变量时请先在 data 里面初始化
- props 指定类型,也就是 type
- props 改变父组件数据 基础类型用 $emit ,复杂类型直接改
- ajax 请求数据用上 isLoading、isError 变量
- 不命名多余数据,现在是详情页、你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
- 表单数据请包裹一层 form
生命周期方法注意点
- 不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
- 在 created 里面监听 Bus 事件
Vue命名规范的更多相关文章
- 【转载】Vue项目中的文件/文件夹命名规范
文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名 ...
- Vue项目中的文件/文件夹命名规范
Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...
- 前端开发规范:命名规范、html 规范、css 规范、js 规范
上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...
- vue文件名规范
之前有看过一些命名规范,也看到说vue文件命名要么全是小写要么就是用小写 + '-':其实看到的时候有点不以意,因为本地能跑起项目:发布能正常访问也就OK了. 但是今天在做自动化部署的时候碰到一个问题 ...
- CSS BEM 命名规范简介
[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...
- vue开发规范
一.简介 团队合作中规范文档是必须的,在多人合作的项目只有定义好一定的编码规范才会使得开发井井有序,代码一目了然,下边将谈一下个人对vue使用规范的一些看法. 二.规范案例 1.组件命名 组件文件名应 ...
- 前端开发规范:命名规范、HTML 规范、CSS 规范、JavaScript 规范
一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了.我是有一点强迫症的人,上周我们后端给我了 ...
- vue 开发规范
本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了 ...
- 前端开发规范之命名规范、html规范、css规范、js规范
在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...
随机推荐
- 词向量 词嵌入 word embedding
词嵌入 word embedding embedding 嵌入 embedding: 嵌入, 在数学上表示一个映射f:x->y, 是将x所在的空间映射到y所在空间上去,并且在x空间中每一个x有y ...
- Playbooks简介
Playbooks简介 关于Playbooks Playbook简单示例 基本组成 主机和用户 任务列表 Handlers: 配置更改时运行操作 执行Playbook Ansible-Pull Lin ...
- python中实现延时回调普通函数示例代码
python中实现延时回调普通函数示例代码 这篇文章主要给大家介绍了关于python中实现延时回调普通函数的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的 ...
- django orm 改动数据库中已存在的表(添加、删除、修改表字段)
python3 manage.py makemigrations --empty api # 因为我的models.py文件并直接在项目根目录,而是根目录下的api目录中 python3 manage ...
- 关于UiAutomator无法识别的元素
1.关于没有name,没有ID的元素的定位---通用篇解题思路:因为没有name,id:其实剩下的选择已不多,要么xpath,要么className.xpath木有好印象(稳定性不高,加之1.0x后需 ...
- 2019 CSP-J 游记(CQ LNBS考场 的退役之战)
T0.10 爆零之战 已经不是第一次参加NOIP了(哦,关于兔子也NOIP了) 这次比赛的话,感觉考场很温馨,键盘很舒适,老师很友善,下次还会来.(哦不,下次来不了了,即将提前退役[大雾]) 刚刚文化 ...
- 【C++】继承和组合的概念?什么时候用继承?什么时候用组合?
继承:通过扩展已有的类来获得新功能的代码重用方法 组合:新类由现有类的对象合并而成的类的构造方式 何时用继承?何时用组合? 1.如果二者间存在一个"是"的关系,并且一个类要对另外一 ...
- Linux新装系统简单指南
也许更好的阅读体验 换源 1. 备份原来的源 sudo cp /etc/apt/sources.list /etc/apt/sources_init.list 2.更换源 先用\(gedit\)打开文 ...
- Oracle数据库基本知识-原理,实例,表空间,用户,表
1.数据库原理及sql 数据库:是人们存放数据,访问数据,操作数据的存储仓库. DB:数据库,按存储结构来组织,存储和管理的数据仓库 DBMS:数据库管理系统,管理数据库的软件 SQL:结构化查询语言 ...
- IDEA debug断点调试技巧
Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可以分析定位异常发生的位置,以及在运行过程中参数的变化.通常我们也可以启用Debug模式来跟踪代码的运行流程去学习三方 ...