views 命名

views 文件夹下面是由 以页面为单位的vue文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。

views 下的文件夹命名

  1. views 下面的文件夹代表着模块的名字
  2. 由名词组成(car、order、cart)
  3. 单词只能有一个(good: car order cart)(bad: carInfo carpage)
  4. 尽量是名词(good: car)(bad: greet good)
  5. 以小写开头(good: car)(bad: Car)

views 下的 vue 文件命名

  1. views 下面的 vue 文件代表着页面的名字
  2. 放在模块文件夹之下
  3. 只有一个文件的情况下不会出现文件夹,而是直接放在 views 目录下面,如 Login Home
  4. 尽量是名词
  5. 大写开头,开头的单词就是所属模块名字(CarDetail、CarEdit、CarList)
  6. 名字至少两个单词(good: CarDetail)(bad: Car)
  7. 常用结尾单词有(Detail、Edit、List、Info、Report)
  8. 以 Item 结尾的代表着组件(CarListItem、CarInfoItem)

vue 方法命名

vue 方法放置顺序

  1. components
  2. props
  3. data
  4. created
  5. mounted
  6. activited
  7. update
  8. beforeRouteUpdate
  9. metods
  10. filter
  11. computed
  12. watch

method 自定义方法命名

  1. 动宾短语(good:jumpPage、openCarInfoDialog)(bad:go、nextPage、show、open、login)
  2. ajax 方法以 get、post 开头,以 data 结尾(good:getListData、postFormData)(bad:takeData、confirmData、getList、postForm)
  3. 事件方法以 on 开头(onTypeChange、onUsernameInput)
  4. init、refresh 单词除外
  5. 尽量使用常用单词开头(set、get、open、close、jump)
  6. 驼峰命名(good: getListData)(bad: get_list_data、getlistData)

data props 方法注意点

  1. 使用 data 里的变量时请先在 data 里面初始化
  2. props 指定类型,也就是 type
  3. props 改变父组件数据 基础类型用 $emit ,复杂类型直接改
  4. ajax 请求数据用上 isLoading、isError 变量
  5. 不命名多余数据,现在是详情页、你的数据是 ajax 请求的,那就直接声明一个对象叫 d,而不是每个字段都声明
  6. 表单数据请包裹一层 form

生命周期方法注意点

  1. 不在 mounted、created 之类的方法写逻辑,取 ajax 数据,
  2. 在 created 里面监听 Bus 事件

Vue命名规范的更多相关文章

  1. 【转载】Vue项目中的文件/文件夹命名规范

    文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小写字母开头的(kebab-case)命名规范 属于组件或类的,统一使用大写字母开头的(PascalCase)命名 ...

  2. Vue项目中的文件/文件夹命名规范

    Vue项目中的文件/文件夹命名规范 0.2262018.09.21 16:01:09字数 820阅读 6979 文件或文件夹的命名遵循以下原则: index.js 或者 index.vue,统一使用小 ...

  3. 前端开发规范:命名规范、html 规范、css 规范、js 规范

    上周小组的培训内容是代码可读性艺术,主要分享如何命名.如何优化代码排版,如何写好的注释.我们都知道写出优雅的代码是成为大牛的必经之路. 下面感谢一位前端开发小伙伴总结的前端开发规范,通过学习相关开发规 ...

  4. vue文件名规范

    之前有看过一些命名规范,也看到说vue文件命名要么全是小写要么就是用小写 + '-':其实看到的时候有点不以意,因为本地能跑起项目:发布能正常访问也就OK了. 但是今天在做自动化部署的时候碰到一个问题 ...

  5. CSS BEM 命名规范简介

    [前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...

  6. vue开发规范

    一.简介 团队合作中规范文档是必须的,在多人合作的项目只有定义好一定的编码规范才会使得开发井井有序,代码一目了然,下边将谈一下个人对vue使用规范的一些看法. 二.规范案例 1.组件命名 组件文件名应 ...

  7. 前端开发规范:命名规范、HTML 规范、CSS 规范、JavaScript 规范

    一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了.我是有一点强迫症的人,上周我们后端给我了 ...

  8. vue 开发规范

    本文档为前端 vue 开发规范 规范目的 命名规范 结构化规范 注释规范 编码规范 CSS 规范 规范目的 为提高团队协作效率 便于后台人员添加功能及前端后期优化维护 输出高质量的文档 命名规范 为了 ...

  9. 前端开发规范之命名规范、html规范、css规范、js规范

    在学习编程的时候,每次看到那些整齐规范的代码,心里顿时对这个程序员表示点点好感,有时,比如看到自己和朋友写的代码时,那阅读起来就是苦不堪言,所以,一些基本的开发规范是必须的,是为了自己方便阅读代码,也 ...

随机推荐

  1. 使用Win10自带的截图工具

    Win10自带的截图工具还是可以的,快捷键win+shift+s 截完图之后会有一个通知,你可以对截图进行二次编辑,编辑之后默认是立即保存的 再搭配着Fu图床工具使用,简直太爽了 讲一下怎么打开通知

  2. Java 8并行流的性能陷阱

    并行化流被分成多个块,每个块独立处理,结果在最后汇总. CPU密集型代码如下: private long countPrimes(int max) {     return range(1, max) ...

  3. WebGL学习笔记二——绘制基本图元

    webGL的基本图元点.线.三角形 gl.drawArrays(mode, first,count) first,代表从第几个点开始绘制即顶点的起始位置 count,代表绘制的点的数量. mode,代 ...

  4. SpringBoot+Vue前后端分离项目,maven package自动打包整合

    起因:看过Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,我早想这样玩玩了. 1. 建立个maven父项目 next 这个作为父工程,next Finish ...

  5. strlen()与sizeof()

    一.strlen() strlen()为计算字符串长度的函数,以‘\0’为字符串结束标志.注意:其传入参数必须是字符串指针(char*), 当传入的是数组名时,实际上数组退化成指针了. 二.sizeo ...

  6. 【C语言】学不会的指针

    指针 前言: 指针是C语言程序的核心,刚开始学指针,嗯....这样呀,貌似不难呀:之后开始用指针,&p,p,*p,**p,这些指针在用的时候,额.....什么东东?每次都要想半天,特别是遇到双 ...

  7. Go基础编程实践(二)—— 类型转换

    bool to string strconv包的FormatBool函数用于将bool转为string package main import ( "fmt" "strc ...

  8. Spring Boot与mybatis整合

    完整的项目截图 一:pom依赖 新增ojdbc6及batis-spring-boot-starter依赖 <dependency> <groupId>com.oracle< ...

  9. mysql远程连接速度很慢

    远程服务器的mysql数据库在服务器上自己连接速度很快,但是在我本地连接确实出奇的慢,进入数据库慢,打开数据表慢,什么都慢.想到之前有看到过应该是远程链接解析的问题,在查询MySQL相关文档和网络搜索 ...

  10. pytest_html报告报错截图+失败重跑

    前言 做web自动化的小伙伴应该都希望在html报告中展示失败后的截图,提升报告的档次,pytest-html也可以生成带截图的报告. conftest.py 1.失败截图可以写到conftest.p ...