Vue代码规范

目录

Vue代码规范

简洁汇总

命名 示例 描述
普通变量 const names = new Array();
const mySchool = "我的学校";		 命名必须是跟需求的内容相关的词，复数加s。
常量 const MAX_COUNT = 10 全部大写，下划线用以分割单词。
组件命名规范 AbcdDatePicker
StaffBenchToChargeItem
abcd-date-picker		 公用组件以 Abcd (公司名缩写简称) 开头
页面内部组件以组件模块名简写为开头，Item 为结尾
在页面中使用组件需要前后闭合，并以短线分隔
方法命名 jumpPage、openCarInfoDialog
getListData、postFormData		 驼峰式命名，统一使用动词或者动词+名词形式
请求数据方法，以data结尾
props 命名 props: { greetingText: String }
greeting-text="hi"		 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用 kebab-case
业务组件 components/ |- CustomCard.vue 业务组件应该以 Custom 前缀命名
紧密耦合的组件名 components TodoList.vue |- TodoListItem.vue |- TodoListItemButton.vue 和父组件紧密耦合的子组件应该以父组件名作为前缀命名

函数方法常用动词汇总

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

结构化规范

目录文件夹及子文件规范

  • 以下统一管理处均对应相应模块
  • 以下全局文件文件均以 index.js 导出，并在 main.js 中导入
  • 以下临时文件，在使用后，接口已经有了，发版后清除
src                               源码目录
|-- api                              接口，统一管理
|-- assets                           静态资源，统一管理
|-- components                       公用组件，全局文件
|-- filters                          过滤器，全局工具
|-- icons                            图标，全局资源
|-- datas                            模拟数据，临时存放
|-- lib                              外部引用的插件存放及修改文件
|-- mock                             模拟接口，临时存放
|-- router                           路由，统一管理
|-- store                            vuex, 统一管理
|-- views                         视图目录
|   |-- staffWorkbench               视图模块名
|   |-- |-- staffWorkbench.vue       模块入口页面
|   |-- |-- indexComponents          模块页面级组件文件夹
|   |-- |-- components               模块通用组件文件夹

vue 文件基本结构

  <template>
    <div>
      <!--必须在div中编写页面-->
    </div>
  </template>
  <script>
    export default {
      components : {
      },
      data () {
        return {
        }
      },
      mounted() {
      }，
      methods: {
      }
   }
  </script>
  <!--声明语言，并且添加scoped-->
  <style lang="scss" scoped>
  </style>

元素规范

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)

<!-- good -->
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<my-component
  foo="a"
  bar="b"
  baz="c"
>
</my-component>

元素特性的顺序

  - class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text

组件选项顺序

  - components
  - props
  - data
  - computed
  - created
  - mounted
  - metods
  - filter
  - watch

详细Vue代码规范好文推荐

史上最全的Vue开发规范：https://juejin.cn/post/6844903652096770055

posted @ 2022-10-14 12:01  AJun816  阅读(598)  评论(0)  编辑  收藏  举报