前端必须搜藏Vue版的团队代码规范

Nordon 规范与每个团队和个人都是息息相关的，因为其影响的不只是只是代码的维护和理解成本，严重的时候是会影响成员开发的心情 一个团队的编码规范、git规范等，并没有绝对的最优解，心里要清楚明白 没有银d ，规范是为了让团队统一，提高代码阅读性、降低代码维护成本等，本文是记录一些在项目 code review 中常见的规范，仅供参考

vue 中 data 的数据默认便会进行双向数据绑定，若是将大量的和渲染无关的数据直接放置在 data 中，将会浪费双向数据绑定时所消耗的性能，将这些和渲染无关的数据进行抽离并配合 Objectfreeze 进行处理 table 中 columns 数据可以单独提取一个外部 js 文件作为配置文件，也可以在当前 vue 文件中定义一个常量定义 columns 数据，因为无论如何都是固定且不会修改的数据，应该使用 Objectfreeze 进行包裹，既可以提高性能还可以将固定的数据抽离，一些下拉框前端固定的数据也建议此 *** 作

一个页面中通常会存在很多个不同功能的d框，若是每一个d框都设置一个对应的变量来控制其显示，则会导致变量数量比较冗余和命名困难，可以使用一个变量来控制同一页面中的所有 Modal d框的展示 比如某个页面中存在三个 Modal d框

例如远程搜索时需要通过接口动态地获取数据，若是每次用户输入接口请求，是浪费带宽和性能的 当一个按钮多次点击时会导致多次触发事件，可以结合场景是否立即执行 immediate

功能的开发过程中，的处理往往是比较容易被忽略的环节，也会在一定程度上影响开发的效率和页面的性能

使用 props 将组件和路由解耦： 取代与 $route 的耦合

通过 props 解耦 这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。

参考：路由组件传参

在父子组件中，掌握父子组件对应的生命周期钩子加载顺序可以让开发者在更合适的时候做适合的事情 父组件

子组件

加载时父子组件的加载顺序

销毁时父子组件的销毁顺序

实际开发过程中会遇到当子组件某个生命周期完成之后通知父组件，然后在父组件做对应的处理 emit up

hook 通过 @hook 监听子组件的生命周期

下拉框遍历时，需要注意 options 标签保持同一行，若是存在换行，会导致选中时的值存在多余的空白

需要将 Options 和下拉框的值保持在同一行

data 数据具有数据层级结构，切勿过度扁平化或者嵌套层级过深，若是过度扁平化会导致数据命名空间冲突，参数传递和处理，若是层级嵌套过深也会导致 vue 数据劫持的时候递归层级过深，若是嵌套层级丧心病狂那种的，小心递归爆栈的问题。而且层级过深会导致数据 *** 作和处理不便，获取数据做容错处理也比较繁琐。一般层级保持2-3层最好。 若是只有一层数据，过于扁平

导致处理不方便

适当的层级结构不仅可以增加代码的维护和阅读性，还可以增加 *** 作和处理的便捷性

可以针对 person 进行 *** 作

策略模式的使用，避免过多的 if else 判断，也可以替代简单逻辑的 switch

解构赋值以及默认值，当解构的数量小于多少时适合直接解构并赋值默认值，数据是否进行相关的聚合处理

任何时候尽量是的一个函数就做一件事情，而不是将各种逻辑全部耦合在一起，提高单个函数的复用性和可读性 每个页面都会在加载完成时进行数据的请求并展示到页面

编写 template 模板时，属性过多时，是否换行

html 中展示一些如 < ， > , & 等字符时，使用字符实体代替

在开发中修改第三方组件样式是很常见的，但由于 scoped 属性的样式隔离，可能需要去除 scoped 或是另起一个 style 。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。

适当的空格可以提升代码的阅读体验，显得更为优雅和美观 选择器后、属性值

和 html 类型，当某行的属性很多，适当的换行可以提高阅读和美观

浏览器在解析 css 时，是按照从右到左递归匹配的，过深的层级嵌套不仅影响性能，而且还会导致样式阅读性和代码维护性降低，一般层架控制在 5 层之内

属性选择器中的值必须用双引号包围，不允许使用单引号，也不允许不使用引号， html 的属性值也是推荐使用双引号， js 中使用单引号

同一 规则下的属性在书写时，应按功能进行分组。并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。 解释 ：

另外，为增加可读性，如果包含 content 属性，应放在属性的最前面。

这种情况可能是因为后端处理数据的时间比较长，导致响应返回数据很慢。您可以尝试以下方法：

1 检查后端接口的性能，看看是否存在性能瓶颈，可以使用一些性能分析工具进行分析。

2 如果后端接口存在性能瓶颈，可以尝试优化后端代码，例如使用缓存、优化SQL语句等。

3 如果后端接口没有性能问题，可以考虑使用异步请求的方式，即前端发送请求后不等待响应，而是继续执行其他 *** 作，等到后端处理完数据后再返回响应，这样可以提高前端的响应速度。

4 另外，您也可以考虑使用一些前端性能优化的技术，例如使用懒加载、减少>

一般来说post请求应该传递对象，而不是直接传递数组，直接传递数组后端可能无法获取到你传过去的参数，个人建议要么吧你传过去的参数序列化，要么把这个数组JSONstringify()转换成json字符串传递过去

✍ 目录总览：

基本特性

语法结构

常用配置选项：

传递的是传统格式的参数

传递的是Json格式的参数

处理方式 （访问到具体属性值）：

在Vue开发当中经常会遇到各种各样的接口问题,最近在项目中遇到开发和线上环境接口路径不一样的问题,网上找到很多博客,大多都是千篇一律的复制粘贴,对于新手来说可能比较难以理解,所以我写这篇博客分享给刚使用vue做项目的小萌新同学一个详细的接口配置思路。

webpack提供了生产环境和线上环境的两种配置文件,平时开发当中使用一个接口,项目上线后就会自动切换成另外一个接口,废话不多说,下面上图。首先是找到vue-cli项目中config文件夹下的devenvjs,默认是下面的样子:

然后我们需要添加开发环境中使用的请求后台数据的接口域名,如下图:

url_api是我自己设置的,可以自定义。后面的路径就是你自己开发环境中的接口。

接着找到prodenvjs,默认如下图:

在这个文件中同样添加线上请求接口的配置:

最后在自己封装的axios中去调用这个接口:

自定义变量 = processenvurl_api(这个就是刚才在config两个文件中自定义的),拼接url到封装的axios中。最后在生产环境中npm run dev 的时候会自动调用刚才在devenvjs中定义的接口,当使用npm run build 去打包的时候会自动调用prodenvjs中配置的接口。

另外:跨域的问题

     可能有些小伙伴在vue中配置了跨域的代理,所以导致拼接url中proxy代理失效,依然出现跨域的问题,解决这个问题我的个人思路是代理配置不变,只需要在devenvjs中用空字符串替换本地接口。就不会出现开发环境中跨域的问题了。有不明白的可以问我,有更好的方案也希望能不吝赐教,谢谢。

链接：>

vue项目实现 动态路由 的方式大体可分为两种:

前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

详情可参阅 花裤衩大佬 的项目 手把手

后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，我们搞了第二种方法。

大体步骤：拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

菜单名字menName；

菜单路径menPath；

菜单指向的资源menuUrl(也就是组件地址, 一般从views层级开始写)

前端登录后通过接口请求拿到菜单数据后，

menName ---> name

menPath ---> path

menuUrl ---->components文件

转换时,用到这个方法找组件资源 把 menuUrl 可以变为components的格式，转为组件文件

生成路由表

可以再过滤一遍生成的路由表

下面这个方法找到views底下所有的组件资源

路由表里路由的组件在所有组件资源里没找到时，将该路由的path变为/404

getRouterpush({ path: '', redirect: '/404', hidden: true });

routeraddRoutes(getRouter); //动态添加路由

前置工作：配置项目路由文件，该文件中没有路由，或者存在一部分公共路由，即没有权限的路由

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;

因为可能会有多级菜单，所以会出现children下边嵌套children的情况;

路由是数组格式

实际前端需要的 component是 component: () => import('@/views/content/classify'),

因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成组件对象

因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_developmentjs和_import_productionjs文件

Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈

beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，

ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤

globalantRouter是为了传递数据给左侧菜单组件进行渲染

上边第三步会给 globalantRouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染

首先现在vue项目里面找到config这个文件，配置里面的indexjs

然后再配置生产环境的参数，也就是devenvjs

最后在prodenvjs里面配置

给config/indexjs里面的内容做个注释

我在src里面创建了一个文件夹axios，apijs是我封装axios方法的文件，globalDatajs是存放后台接口的文件。

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的>

以上就是关于前端必须搜藏Vue版的团队代码规范全部的内容，包括:前端必须搜藏Vue版的团队代码规范、vue接口请求很快完成,响应返回数据很慢、使用vue的ajax-post请求调用接口等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！