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. (十)redis源码解读

    一.redis工作机制 redis是 单线程,所有命令(set,get等)都会加入到队列中,然后一个个执行. 二.为什么redis速度快? 1.基于内存 2.redis协议resp 简单.可读.效率高 ...

  2. Linux CentOS7 下无图形界面安装Oracle11G R2版本

    01,系统 Centos7 数据库版本 Oracle_11gR2 ,以及硬件要求 内存不能小于 1G,可用硬盘不小于8G Swap分区空间不小于2G grep MemTotal /proc/memin ...

  3. element ui表格常用功能如:导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求

    <template> <div class="table-cooperte"> <el-table :data="tableData&quo ...

  4. Java并发之等待/通知机制

    目录 1 前言 1.1 先来段代码放松一下 2 Object wait()/notify() 2.1 一段入门代码 2.2 问题三连击 a.为什么官方说wait() 要放在while里面? b.为什么 ...

  5. Java 文件完整性校验 MD5 sha1 sha256 sha224 sha384 sha512

    由于项目中需要使用文件做备份,并且要提供备份文件的下载功能.备份文件体积较大,为确保下载后的文件与原文件一致,需要提供文件完整性校验. 网上有这么多此类文章,其中不少使用到了 org.apache.c ...

  6. 1 linux性能优化之平均负载uptime

    不知道onenote的笔记复制出来就是图片了...

  7. ajax处理csrf的三种方式

    方式一: $.post({ url: '/get_result/', data: { value0: $('#v1').val(), value1: $('#v2').val(), csrfmiddl ...

  8. centos6 rpm安装mysql 5.7

    安装过程中需要进行系统补包操作 [root@cent6zbx ~]# rpm -qa |grep mysql mysql-libs--.el6_6.x86_64 [root@cent6zbx ~]# ...

  9. 安卓、IOS端AEC密钥加密 Java端密钥解密通用实现(16进制表现形式)

    由于业务需求,需要实现在客户端对重要信息进行加密,在服务端进行解密.客户端包括IOS和安卓的 服务端位Java. 注意密钥 需要保持一致,可以自己定义 . 安卓端加密代码: ============= ...

  10. SpringBoot2.x+Redis+nginx实现session共享和负载均衡

    1.创建SpringBoot项目添加依赖 <dependency> <groupId>org.springframework.session</groupId> & ...