vue 开发规范

命名规范

  • 不使用保留字

变量

  • 小驼峰
  • 能描述变量内容
  • 复数加s
// 我的app名称为'朝阳的百宝箱'
let myAppName = '朝阳的百宝箱'
// 我的书籍有《卓有成效的管理者》、《牧羊少年奇幻之旅》
let myBooks = [‘《卓有成效的管理者》’,‘《牧羊少年奇幻之旅》’]

常量

  • 全大写
  • _分隔单词
const MAX_NUM = 100

组件

  • 首字母大写
  • -分隔
在这里插入代码片

方法

  • 小驼峰
  • 动词,动词+名词
  • 操作数据相关的方法以data结尾
getListData(){}
// 常用动词
get 获取/查询
set 设置
add 增加
del 删除
clear 清除
edit 修改
save 保存
submit 提交
publish 发布
begin 开始
end 结束
start 开始
stop 停止
bind 绑定
copy 复制
select/choose 选取/选择
mark 标记
find 查找
play 播放
pause 暂停
increase 增加
decrease 减少
init 初始化
build 构建
input 输入
output 输出
encode 编码
decode 解码
pack 打包
unpack 解包
parse 解析
connect 连接
disconnect 断开连接
send 发送
receive 接收
upload 上传
download 下载
refresh 刷新
lock 锁定
unlock 解锁
expand 展开
collapse 折叠
finish 完成
enter 进入
exit 退出

views下的文件名

  • 用模块名开头
// 博客列表
blogList.vue
// 博客表单
blogForm.vue
// 博客详情
blogDetail.vue

模块输出

  • 输出一个函数时,首字母小写
export default getList
  • 输出一个对象时,首字母大写
let User = {name:'朝阳',say:()=>{},jump:()=>{},
}
export default User

目录规范

src 外目录规范

  • router 路由
  • store 跨组件数据共享vuex

src 内目录规范

  • api 接口

  • assets 静态资源

    • icons 图标
    • css 公共样式
  • components 公共组件

  • datas 模拟数据(接口联调后删除)

  • mock 模拟接口(接口联调后删除)

  • views 业务模块/页面代码

    • blog 模块名

      • blogIndex.vue 博客首页

      • components 模块内的组件

      • pages 模块内的页面

        • blogForm.vue 博客表单
        • blogDetail.vue 博客详情

选项规范

vue 选项推荐的顺序如下:

  • mixin
  • components
  • props
// 需声明传入的变量名,数据类型,是否必传,有效性校验
props:{title :{type:String,required:true,validator:(value)=>{return ['圣诞节','春节','元旦'].indexOf(value)!== -1}} 
}
  • data
  • computed
  • watch
  • methods
  • filters
  • created
  • mounted
  • destroyed

注释规范

需添加注释的内容

  • 公共组件使用说明
  • 重要函数/方法
  • 复杂的业务逻辑
  • 特殊情况的代码说明

公共组件/函数

/**
* 使用场景/功能 :展示系统 logo
* 参数说明  
* -- src 系统logo的图片路径
* -- name 系统名称
* 调用示例
* <logo  :src='src' :name='name'   />
*/

赋值规范

数组的解构赋值

// 取出数组中的前两项
let [first,second] = [1,2,3,4]

用扩展运算符…拷贝数组

let list_copy = [...this.list]

函数参数的解构赋值

fuction getFullName(user){const [firstName,lastName] = user 
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/630149.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ARCGIS PRO SDK Annotation 概念及操作

使用Annotation的API功能。Annotation 的API功能位于ArcGIS.Core.dll中。Annotation API通常与地理数据库、地图创作和编辑结合使用。ArcGIS.Core.dll ArcGIS.Core.Data.map API中的几乎所有方法都应该在MCT上调用。 一、Annotation featureclass 1、从GeodatabaseGeodatabase数…

MyBatis-Plus之内置接口Service接口Mapper接口

目录 1.Service接口 1.1.Save 1.2.SaveOrUpdate 1.3.Remove 1.4.Update 1.5.Get 1.6.List 2.Mapper接口 2.1.Insert 2.2.Delete 2.3.Update 2.4.Select 1.Service接口 Service CRUD 接口说明&#xff1a; 通用 Service CRUD 封装IService接口&#xff0c;进一步封…

C#: CRC8,CRC16,CRC32 校验代码

说明&#xff1a;CRC即循环冗余校验码&#xff08;Cyclic Redundancy Check&#xff09;&#xff1a;是数据通信领域中最常用的一种查错校验码&#xff0c;其特征是信息字段和校验字段的长度可以任意选定。循环冗余检查&#xff08;CRC&#xff09;是一种数据传输检错功能&…

统计学-R语言-5.1

文章目录 前言随机性和规律性概率变量的分布离散型--二项、泊松、几何二项分布几何分布泊松分布 连续型--均匀、正态均匀分布正态分布 其它统计分布--χ2分布、t分布、F分布χ2分布t分布F分布 练习 前言 从本篇文章开始介绍有关概率与分布的介绍。 随机性和规律性 当不能预测…

嵌入式-Stm32-江科大基于标准库的GPIO的八种模式

文章目录 一&#xff1a;GPIO输入输出原理二&#xff1a;GPIO基本结构三&#xff1a;GPIO位结构四&#xff1a;GPIO的八种模式道友&#xff1a;相信别人&#xff0c;更要一百倍地相信自己。 &#xff08;推荐先看文章&#xff1a;《 嵌入式-32单片机-GPIO推挽输出和开漏输出》…

汽车排量中的1.5T是什么意思,常见的排量有哪些?

问题描述&#xff1a;汽车排量中的1.5T是什么意思&#xff0c;常见的排量有哪些&#xff1f; 问题解答&#xff1a; 汽车排量通常用来表示发动机的容积&#xff0c;即每个发动机的活塞在运动中从上到下运动一次所能容纳的气体的总体积。排量的单位通常是升&#xff08;L&…

vue-cli解决跨域

在vue.config.js中 找到devServer 在devServer中创建proxy代理 proxy:{ path&#xff08;路径中包含这个path就会导航到target的目标接口&#xff09;&#xff1a;{ target:"目标接口" } } 例&#xff1a; 1 同源策略只针对于浏览器&#xff0c;代理服务器到后端接…

spring boot 引入redis报错

bug描述&#xff1a; org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name ‘assetChangeOrderController’: Unsatisfied dependency expressed through field ‘redisTemplate’; nested exception is org.springframework.be…

操作系统课程设计-Linux 进程控制

目录 前言 1 实验题目 2 实验目的 3 实验内容 3.1 进程的创建 3.1.1 步骤 3.1.2 关键代码 3.2 子进程执行新任务 3.2.1 步骤 3.2.2 关键代码 4 实验结果与分析 4.1 进程的创建 4.2 子进程执行新任务 5 代码 5.1 进程的创建 5.2 子进程执行新任务 前言 本实验为课…

Electron+React项目打包踩坑记录

首先&#xff0c;如何打包 写下本文的时间是 2024/01/16&#xff0c;搜索了网络上 ElectronReact 的打包方式&#xff0c;中间行不通&#xff0c;本文采用的方式是记录本文时 Electron 快速入门(https://www.electronjs.org/zh/docs/latest/tutorial/quick-start)记录的打包方式…

Stream API 函数式编程 - 告别for循环,代码竟能写的如此优雅?

目录 一、Stream API 函数式编程 1.1、Stream 简介 a&#xff09;为什么引入 Stream&#xff1f;Stream 的出现就是为了让关于集合的操作更加简单&#xff1a; b&#xff09;Stream 的特性&#xff1a; c&#xff09;对stream的操作分为为两类&#xff0c;中间操作 和 结束…

响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 例4-3 textarea

代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>textarea</title> </head><body> <h2>多行文本框:</h2> <!--textarea&#xff08;文本域&#xff09;cols(列) rows(行)--> …

Template Engine-06-模板引擎 Handlebars 入门介绍

拓展阅读 java 表达式引擎 logstash 日志加工处理-08-表达式执行引擎 AviatorScriptMVELOGNLSpELJEXLJUELJanino QLExpress 阿里表达式引擎系统学习 什么是 Handlebars&#xff1f; Handlebars 是一种简单的模板语言。 它使用模板和输入对象生成 HTML 或其他文本格式。Ha…

go语言(一)----声明常量

package mainimport ("fmt""time" )func main() {fmt.Print("hello go!")time.Sleep(1 * time.Second)}运行后&#xff0c;结果如下&#xff1a; 1、golang表达式中&#xff0c;加&#xff1b;和不加&#xff1b;都可以 2、函数的{和函数名一…

【Qt之模型视图】1. 模型和视图架构

1. 模型/视图架构是什么及有什么用 MVC&#xff08;Model-View-Control&#xff09;是一种源自Smalltalk的设计模式&#xff0c;通常用于构建用户界面。 MVC由三种类型的对象组成。模型是应用对象&#xff0c;用来表示数据&#xff1b;视图是模型的用户界面&#xff0c;用来显…

【征服redis5】redis的Redisson客户端

目录 1 Redisson介绍 2. 与其他Java Redis客户端的比较 3.基本的配置与连接池 3.1 依赖和SDK 3.2 配置内容解析 4 实战案例&#xff1a;优雅的让Hash的某个Field过期 5 Redisson的强大功能 1 Redisson介绍 Redisson 最初由 GitHub 用户 “mrniko” 创建&#xff0c;并在…

瑞_Java开发手册_(七)设计规约

文章目录 设计规约的意义设计规约 &#x1f64a;前言&#xff1a;本文章为瑞_系列专栏之《Java开发手册》的设计规约篇。由于博主是从阿里的《Java开发手册》学习到Java的编程规约&#xff0c;所以本系列专栏主要以这本书进行讲解和拓展&#xff0c;有需要的小伙伴可以点击链接…

Java数据结构实现数组(配套习题)

数据结构 数组 一组相同数据类型的集合 特点 数组在内存中是连续分配的创建时要指明数组的大小数组名代表首地址,索引从0开始,到数组的长度-1数组一旦创建好,大小不可以改变使用索引 获取索引位置的值 arr[index]修改 arr[index] val删除 (假删除)遍历,将数组中的元素,依次…

在全志T113-i平台上实现H.265视频解码步骤详解

H.265&#xff0c;也被称为HEVC(HighEfficiency Video Coding)&#xff0c;作为H.264的继任者&#xff0c;提供了更好的视频压缩和更高的视频质。H.265通过引入更多先进的编码技术&#xff0c;如更强大的运动估计和更高效的变换编码&#xff0c;对比H.264进行了改进。这些改进使…

【latex】参考文献排版前移,在最前面引用\usepackage{url}

【LaTeX】参考文献排版前移&#xff0c;在最前面引用\usepackage{url} 写在最前面完整解决步骤请教申申latex编译报错解决方案 写在最前面 参考文献从21开始排版前移了 解决方案&#xff1a;在最前面加一行 \usepackage{url}完整解决步骤 请教申申 申申yyds&#xff01;&am…