huyixi.wiki

Appearance

Vue Style Guide ​

命名规范 ​

  • camelCase（小驼峰式命名法 —— 首字母小写）
  • PascalCase（大驼峰式命名法 —— 首字母大写）
  • kebab-case（短横线连接式）
  • Snake（下划线连接式）

项目文件命名 ​

项目名 ​

kabab-case

例:my-project-name

文件夹 ​

参照项目命名规则，有复数结构时，要采用复数命名法。例：docs、assets、components、directives、mixins、utils、views。

图像文件名 ​

Vue 组件命名 ​

单例组件名 ​

bash
# 每个页面只使用一次
# 不接受任何 prop
# `The` 前缀命名
components/
|- TheHeading.vue
|- TheSidebar.vue

基础组件名 ​

bash
# 展示类的、无逻辑、无状态、不掺杂业务逻辑
# 页面内可使用多次，不同页面也可复用，是高可复用组件
# `Base` 前缀命名
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

业务组件 ​

bash
# 只在当前项目中会用到，不具有通用性
# 掺杂了复杂业务的组件，拥有自身 data、prop 的相关处理
# `Custom` 前缀命名
components/
|- CustomCard.vue

紧密耦合的组件名 ​

bash
# 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
# `以父组件` 前缀命名
components/
|- TodoList.vue # 父组件
|- TodoListItem.vue # 子组件
|- TodoListItemButton.vue # 子组件

代码参数命名 ​

变量 ​

命名方法：camelCase 命名规范：类型 + 对象描述或属性的方式

javascript 代码解读复制代码// bad var getTitle = "LoginTable"

// good let tableTitle = "LoginTable" let mySchool = "我的学校"

常量 ​

命名方法：全部大写下划线分割 命名规范：使用大写字母和下划线来组合命名，下划线用以分割单词

javascript 代码解读复制代码const MAX_COUNT = 10 const URL = 'http://test.host.com'

方法 ​

命名方法：camelCase 命名规范：统一使用动词或者动词 + 名词形式

javascript 代码解读复制代码// 1、普通情况下，使用动词 + 名词形式 // bad go、nextPage、show、open、login

// good jumpPage、openCarInfoDialog

// 2、请求数据方法，以 data 结尾 // bad takeData、confirmData、getList、postForm

// good getListData、postFormData

// 3、单个动词的情况 init、refresh

动词含义返回值can判断是否可执行某个动作 (权 )函数返回一个布尔值。true：可执行；false：不可执行；has判断是否含有某个值函数返回一个布尔值。true：含有此值；false：不含有此值；is判断是否为某个值函数返回一个布尔值。true：为某个值；false：不为某个值；get获取某个值函数返回一个非布尔值set设置某个值无返回值、返回是否设置成功或者返回链式对象

Reference ​