Vue前端书写规范大全(非常详细!) vue代码规范

   2023-02-08 学习力0
核心提示:命名规范s:表示字符串。例如:sName,sHtml;n:表示数字。例如:nPage,nTotal;b:表示逻辑。例如:bChecked,bHasLogin;a:表示数组。例如:aList,aGroup;r:表示正则表达式。例如:rDomain,rEmail;f:表示函数。例如:fGetHtml,fInit;o:表示以上未涉及

命名规范

s:表示字符串。例如:sName,sHtml;
n:表示数字。例如:nPage,nTotal;
b:表示逻辑。例如:bChecked,bHasLogin;
a:表示数组。例如:aList,aGroup;
r:表示正则表达式。例如:rDomain,rEmail;
f:表示函数。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他对象,例如:oButton,oDate;

1:作用域不大临时变量可以简写,比如:str,num,bol,obj,fun,arr。

2:循环变量可以简写,比如:i,j,k等。

标准变量采用驼峰式命名

ID在变量名中全大写

URL在变量名中全大写

Android在变量名中大写第一个字母

iOS在变量名中小写第一个,大写后两个字母

常量全大写,用下划线连接

构造函数,大写第一个字母

var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
    this.name = name;
}

指令规范:

1.为v-for设置Key值。(不建议 用index 作为 key,和没写基本上没区别,因为不管你数组的顺序怎么颠倒,index 都是 0, 1, 2 这样排列,导致 Vue 会复用错误的旧子节点,做很多额外的工作)

2.规避v-if和v-for用在一起。或者增加一层

3.函数中统一使用_this=this来解决全局指向问题。

4.复用多用v-show少用v-if

路由

1.路由至少包含三个选项:path、name、component。path统一小写;name对应于组件中的name,大写开头驼峰;component组件驼峰。名称大写开头的组件

Template模板文件

1.相同的卡片布局,首先整合数据,尽量使用循环方式去增加,避免变更多处的问题。

2.标签语义化,避免清一色的div元素

3.DOM的层级数尽可能少,优化渲染速度。

4.样式class的命名:统一以小写字母开头,小写字母、下划线和数字组成。命名中尽量避免使用中文拼音,应该采用更简明有语义的英文单词进行组合。不建议使用驼峰法命名class属性。使用下划线的目的是为了和第三方库中的命名冲突。例如:xx_left,xx_line。

5.及时模块化

我们在实际进行组件抽离工作的时候,需要考虑到不要过度的组件化

在决定是否将代码分开时,无论是 Javascript 逻辑还是抽离为新的组件,都需要考虑以下几点:

是否有足够的页面结构/逻辑来保证它?

  • 代码重复(或可能重复)?
  • 它会减少需要书写的模板吗?
  • 性能会收到影响吗?
  • 是否会在测试代码的所有部分时遇到问题?
  • 是否有一个明确的理由?
  • 这些好处是否超过了成本?

css:

1.使用 scoped关键字,约束样式生效的范围。

2.避免使用标签选择器(效率低、损耗性能)。

其它注意事项

变量应该在最小的范围内定义,并尽可能的保持最少的活动时间。

不要在代码中重复使用相同意义的数字,用一个变量代替

对应的方法应该使用对应的动词,例如:get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。

校验时,先去校验公共库查找是否有对应校验,有则使用,没有则查看是否要多处使用,如果可复用,则进行抽离。公共函数,还是建议补全注释,让后面的人不需要重复造***。复杂的业务逻辑处理说明、特殊情况的代码处理说明,对于特殊用途的变量、存在临界值、使用了某种算法思路进行注释说明

文件夹小写,vue文件大写

补充:结构化规范

目录文件夹及子文件规范

以下统一管理处均对应相应模块

以下全局文件文件均以 index.js 导出,并在 main.js 中导入

以下临时文件,在使用后,接口已经有了,发版后清除

src 源码目录

|-- api 接口,统一管理
|-- assets 静态资源,统一管理
|-- components 公用组件,全局文件
|-- filters 过滤器,全局工具
|-- icons 图标,全局资源
|-- datas 模拟数据,临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口,临时存放
|-- router 路由,统一管理
|-- store vuex, 统一管理
|-- views 视图目录
| |-- staffWorkbench 视图模块名
| |-- |-- staffWorkbench.vue 模块入口页面
| |-- |-- indexComponents 模块页面级组件文件夹
| |-- |-- components 模块通用组件文件夹

总结

原文地址:https://blog.csdn.net/weixin_52691965/article/details/128547107
 
反对 0举报 0 评论 0
 

免责声明:本文仅代表作者个人观点,与乐学笔记(本网)无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
    本网站有部分内容均转载自其它媒体,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责,若因作品内容、知识产权、版权和其他问题,请及时提供相关证明等材料并与我们留言联系,本网站将在规定时间内给予删除等相关处理.

  • 写react vue要规范,结尾的冒号,之间的逗号一
    写react  vue要规范,结尾的冒号,之间的逗号一定要写规范,写全
    03-08
  • 【转】React、Vue访问NotFound
    部署完成后,访问没问题,从页面中点击跳转也没问题,但是只要点击刷新或通过浏览器地址栏回车,就会出现404现象!在本地开发中是没有这个问题的,调试的时候一切都是正常的直接访问地址,便会出现404http://www.xxx.com/home/application/list问题原因:刷新
    03-08
  • 移动端悬浮框可移动,可回弹,Vue and React
    一,首先讲 React的悬浮框示例,可参照链接Demo文档,可参照链接 1. 安装npm install suspend-button -S2. 使用import React, { Component } from 'react'import ReactDOM from 'react-dom'import SuspendButton from 'suspend-button'class App extends Com
    03-08
  • react中虚拟DOM的基本概念 vue虚拟dom和react虚
    react中的核心概念1、DOM的本质是什么: 浏览器中的概念,用js对象来表示页面上的元素,并提供操作DOM对象的API2、什么事react中的虚拟DOM:是框架中的概念,是程序员用js对象来模拟页面上的DOM和DOM 的嵌套3、为什么要实现虚拟DOM:为了实现页面中DOM元素的
    03-08
  • React与Vue的相同与不同点 react和vue区别和看法
    React与Vue的相同与不同点 react和vue区别和看
    我们知道JavaScript是世界上最流行的语言之一,React和Vue是JS最流行的两个框架。所以要想前端的开发那么必须掌握好这两个框架。那么这两个框架有什么不同呢?React 和 Vue 相同之处,它们都有:使用 Virtual DOM提供了响应式 (Reactive) 和组件化 (Composabl
    03-08
  • vue3+TS 自定义指令:长按触发绑定的函数
    vue3+TS 自定义指令:长按触发绑定的函数而然间看到一个在vue2中写的长按触发事件的自定义指定,想着能不能把他copy到我的vue3项目中呢。编写自定义指令时遇到的几个难点1.自定义指令的类型在ts中写任何东西都要考虑到类型的问题,自定义指令的类型问题依然存
    03-08
  • Vue生命周期 vue生命周期几个阶段
    Vue生命周期 vue生命周期几个阶段
    官网解释一、Vue的生命周期Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom - 渲染、更新 - 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。Vue2生命周期:1.beforeCreate(创建前)数据观测和初始化事件还未开始,此时 dat
    03-08
  • vue 中安装并使用echart
    vue 中安装并使用echart
    本文为博主原创,转载请注明出处:1.安装echart 依赖:  安装命令: npm install echarts --save  在vscode 的终端窗口进行执行,如图所示:   执行完之后,查看 项目中的echart 版本依赖是否添加成功:  package-lock.json 中有具体的echart 依赖
    03-08
  • day04-Vue01
    day04-Vue01
    Vue011.Vue是什么?Vue(读音/vju:/,类似于view)是一个前端框架,依据构建用户界面Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或者项目整合支持和其他类库结合使用开发复杂的单页应用非常方便Vue是Vue.js的简称官网:Vue.js - 渐进式 JavaScr
    03-08
  • Vue + Element 自定义上传封面组件
    Vue + Element 自定义上传封面组件
    前一段时间做项目,频繁使用到上传图片组件,而且只上传一个封面,于是想着自定义一个图片封面上传组件。先来看一下效果:                      第一张图片是上传之前,第二张图片是上传成功后,第3张图片是鼠标放上去之后的效果! 首先整理需
    03-08
点击排行