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

命名规范

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 模块通用组件文件夹

总结

到此这篇关于Vue前端书写规范的文章就介绍到这了,更多相关Vue前端书写规范内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue前端开发规范整理(推荐)

    基于Vue官方风格指南整理 一.强制 1. 组件名为多个单词 组件名应该始终是多个单词的,根组件 App 除外. 正例: export default { name: 'TodoItem', // ... } 反例: export default { name: 'Todo', // ... } 2. 组件数据 组件的 data 必须是一个函数. 当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数. 正例: // In a .vue fi

  • Vue项目中ESlint规范示例代码

    前言 eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到,本文就给大家分享了开发项目中使用的eslint校验规范,供参考: 示例代码 module.exports = { root: true, parserOptions: { parser: 'babel-eslint', sourceType: 'module' }, env: { browser: true, node: true, es6: true, }, extends: ['plugin:vue

  • vue项目代码格式规范设置参考指南

    目录 前言 为项目添加eslint 自定义eslint配置 pre-commit设置 VS Code配置 参考 总结 前言 为了尽量统一项目成员的代码风格,降低开发者对代码的理解成本,所以我们需要为项目统一代码格式规范:同时我们不能为了降低理解成本,去增加开发成本,所以我们借助VS Code的相关插件去完成代码格式化的功能. 为项目添加eslint 使用vue-cli构建的项目,在项目构建时,就会让你选择格式化方案,如果是已有项目运行vue add eslint添加格式化方式,建议选择Prett

  • vue2中插槽(slot)的基本使用规范

    目录 前言 基础slot组件(匿名插槽) 具名插槽 作用域插槽 解构插槽 总结 前言 在vue的开发过程中,我们会经常使用到vue的slot插槽组件,vue官方文档的描述: Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将元素作为承载分发内容的出口 slot大概分为以下几种: 基础slot组件(匿名插槽) 匿名插槽主要使用场景并不涉及特别复杂的业务,更像是纯展示组件内容 <!--子组件--> <template>   

  • Vue的编码技巧与规范使用详解

    当我们完成项目的构建,进入开发阶段的时候,除了你需要了解框架本身的知识点外,我们还需要提前掌握一些项目的编码技巧与规范,在根源上解决之后因编码缺陷而导致的项目维护困难.性能下降等常见问题,为项目多人开发提供编码的一致性. 本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量,并会结合代码片段加强大家的理解与认知.当然不是所有实例都是针对 Vue.js 开发的,有些同样也适用于其他前端项目. 实例 1. 使用对象代替 if 及 switch 在很多情况下,我们经常会遇到循环判断执行赋值操

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

    命名规范 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,

  • Vue前端导出Excel文件的详细实现方案

    目录 一.技术选型 二.技术实现 使用 vue-json-excel 插件实现 1.安装 vue-json-excel 依赖 2.注册插件到 vue 实例 3.使用方式 基于 sheetJS-xlsx 解析器的 xlsx-style 实现(推荐) 1.安装依赖 2.使用方法 三.参考资料 总结 一.技术选型 1.使用 vue-json-excel 插件实现 优点:简单便捷,易上手,开箱即用: 缺点:不支持 excel 表格样式设置,且支持功能比较单一: 2.基于 sheetJS-xlsx 解析器

  • Vue前端打包的详细流程

    目录 1.添加打包命令 2.运行打包代码 3.打包指定不同的环境变量 4.打包自定义文件 4.1 移除三方包 4.2 gzip压缩 5.打包发生错误: 1.添加打包命令 package.json中添加配置 npm run build 发布到线上的代码 不便于调试 命令: ①npm run build:dev 开发调式环境 ②npm run build:prod 线上调试环境 "build:dev": "vue-cli-service build --mode dev"

  • vue前端HbuliderEslint实时校验自动修复设置

    目录 HBuilderX中ESLint插件安装 自定义eslint-js规则 注意事项 不管是多人合作还是个人项目,代码规范是很重要的.这样做不仅可以很大程度地避免基本语法错误,ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确.风格统一的代码. HBuilderX中ESLint插件安装 HBuilderX 包含4款语法校验插件,htmlhint, stylelint, eslint-plugin-vue, eslint-js.点击工具->插件安装,界面如下: 点击插件市

  • JavaScript常用代码书写规范的超全面总结

    一.全局命名空间污染 总是将代码包裹在一个立即的函数表达式里面,形成一个独立的模块. 不推荐 var x = 10, y = 100; console.log(window.x + ' ' + window.y); 推荐 ;(function(window){ 'use strict'; var x = 10, y = 100; console.log(window.x + ' ' + window.y); }(window)); 二.立即执行函数 在立即执行函数里面,如果有用到全局变量应该通过

  • vue+koa2搭建mock数据环境的详细教程

    前段时间写了一篇前端vue项目实现mock数据方式的文章,主要是在vue项目里使用mock数据,数据和项目耦合在一起,不太优雅,作为一个有追求的前端,怎么能容忍这种方法呢?特以此篇,记录利用koa2搭建服务端,提供mock数据的方法. 初始化vue项目 这里以vue项目为主,当然别的类型项目依然可以使用这种mock数据的方式. vue create vue-koa2-demo 前提是安装了vue-cli的脚手架,我电脑安装的是vue-cli3的版本.按照要求一步一步选择后,记得选择安装vuex,

  • Vue——前端生成二维码的示例

    与后端生成二维码相比,前端生成二维码更具有灵活性,下面就介绍两种前端生成二维码的方式,两种方式相比之下,vue-qr比qrcode多了一个再中间添加logo的功能. 方式一:qrcode npm npm install --save qrcodejs2 import import QRCode from 'qrcodejs2' 使用 <div class="qrcode" ref="qrCodeUrl"></div>   <script

  • 深入理解Vue的插件机制与install详细

    前言: 我们在使用Vue的时候,经常会使用并写一些自定义的插件,然后利用Vue.use引入.所以提到写插件,install这个方法是必不可少的.Vue.js 的插件应该暴露一个 `install` 方法.这个方法的第一个参数是 `Vue` 构造器,第二个参数是一个可选的选项对象.这是Vue官方对Vue插件的规范.那这install函数到底是什么东东呢,Vue内部到底用它做了什么处理,怎么调用的,今天我就给大家伙从源码层面把他整的明明白白. 看完这篇文章,你将学到: install函数可以做些什么

  • vue前端开发辅助函数状态管理详解示例

    目录 mapState mapGetters mapMutations mapActions 示例 小结 mapState 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性.不使用mapState时,获取对象状态,通常放在使用组件的computes属性中,使用方式为: //.... computed: { count: function(){ return this.$store.state

随机推荐