# codeSpecification4vue

**Repository Path**: 125586657/codeSpecification4vue

## Basic Information

- **Project Name**: codeSpecification4vue
- **Description**: 前端代码规范（vue版本）
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-05-29
- **Last Updated**: 2025-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 												前端规范（vue）

#### 项目分包目录结构

项目采用分包机制，在分包中需要按照规范书写代码，便于后续的维护。分包中的接口、资源文件都应该存放在本分包中，不应该引用其他分包的资源。

api：接口调用统一放在api目录，接口命名以’Api‘后缀进行区分（便于和页面中的方法区分），接口定义需要写功能描述，参数复杂的需要写参数描述
components：在分包中分包组件也需要遵循easyCom规范（组件都放置在components文件夹中，组件命名以’-‘分隔，组件文件夹和组件名称保持一致）

pages：分包的页面都放这个文件夹，pages不再创建二级文件夹，并且分包的主页（入口页）统一以’index.vue‘命名（便于后期查找维护）

static：资源目录，存放图片、iconfont等静态资源

具体结构请看下图：

<img src="./分包目录结构.png" alt="分包目录结构" style="zoom:70%;margin:0;" />

Mixin分割代码：页面功能比较复杂的代码量比较多的需要使用mixin将不同代码分割，以便后期维护，例如下面聊天页面的功能页面分割：

<img src="./功能mixin命名规则.jpg" alt="分包目录结构" style="margin:0;" />



#### 项目第三方组件使用

目前项目UI组件以基于uview1.0重新封装的vk-uview-ui为主（使得uview1.0支持vue3），以自定义封装为辅。后续项目会考虑升级为vue3.0和兼容鸿蒙Next，在组件选型上需要将这两个因素考虑进去。

第三方组件尽量使用npm引入，不推荐直接从插件市场直接导入（不便于后期维护）

vk-uview-ui：项目的主要UI组件

全局组件：全局通用组件应剔除业务，如果在组件中调用接口等具体业务操作的组件，请将组件移到分包中，全局组件使用’pb-‘前缀。附件会提供基于vk-uview-ui的部分通用组件



#### 全局样式

禁止将很大的样式表作为全局样式引入，比如colorUI 的main.js。全局样式应当自己按需引入样式，非必要不要将样式写在全局样式中。



#### 禁止使用filter过滤器

过滤器以在vue3.0版本移除。



#### 禁止在同一个元素中同时使用v-for和v-if

这两个指令在vue2.0和vue3.0优先级不一致，所以vue2.0版本也应该避免在同一个元素上同时使用



#### 不推荐使用强制刷新（$forceUpdate）

应该多使用局部刷新，发现局部变量修改不了的应该要寻找原因，是不是后加的嵌套对象的属性是非响应式的，可使用this.$set()去将后续添加的属性变为响应式的



#### 非特殊情况推荐使用列表级滚动

列表级滚动性能优于局部滚动。如果对性能要求特别高的 app端可使用原生列表组件（uniapp官方有针对该组件进行了封装）



#### 避免使用plus API

非必要，应避免使用plus API，plus API不支持鸿蒙Next，可以使用uniapp自带的api（'uni.'开头的）或者使用uts替代。



#### 资源文件的导出与引入禁止使用commonJS规范

Vue3.0不支持commonJS规范，请使用ES6模块规范导入导出文件



#### 插槽的使用

Vue3 将不支持 `slot="xxx"` 的用法 ，请使用 `v-slot:xxx` 用法或者使用’#‘简写形式



#### 禁止在自定义组件元素上书写样式

自定义组件元素上书写样式在小程序中可能会失效，所以应当避免在自定义组件元素上书写样式



### 推荐使用flex布局

flex布局在移动端兼容性较好，布局时推荐使用flex布局。项目中有针对flex布局二次封装了一层css样式。该封装主要是起到见名知意的意图，不强制使用。封装思想来自于flutter 的flex布局。

```
/* 横向*/
.pb-flex-row {
	display: flex;
	flex-direction: row;
}

/* 纵向*/
.pb-flex-column {
	display: flex;
	flex-direction: column;
}

/* 横向可折行*/
.pb-flex-wrap {
	display: flex;
	/* flex-direction: row;//一般多行模式都是x轴为主轴，很少设置Y轴为主轴，所以这里写死一下row
	flex-wrap: wrap; */
	flex-flow: row wrap;
}

/* flex布局主轴对齐方式*/
/* 起点对齐 |□□□□  | */
.pb-main-start {
	justify-content: flex-start;
}

/* 结束点对齐 |  □□□□|  */
.pb-main-end {
	justify-content: flex-end;
}

/* 中心对齐 |  □□□□  |  */
.pb-main-center {
	justify-content: center;
}

/* 两端对齐 |□  □  □  □|  */
.pb-main-between {
	justify-content: space-between;
}

/* 分布相同空间 | □ □ □ □ |  */
.pb-main-around {
	justify-content: space-around;
}

/* flex布局侧轴对齐方式*/
/* 起点对齐 */
.pb-cross-start {
	align-items: flex-start;
}

/* 结束点对齐 */
.pb-cross-end {
	align-items: flex-end;
}

/* 中心对齐 */
.pb-cross-center {
	align-items: center;
}

/* 基线对齐(一般用于文字，文字第一行对齐) */
.pb-cross-baseline {
	align-items: baseline;
}

/* 侧轴上延展（尽量大的填充父容器，不设置侧轴其他对齐方式，该属性为默认值） */
.pb-cross-stretch {
	align-items: stretch;
}

/* 填满剩余空间 */
.pb-expanded {
	/* flex-grow: 1; */
	flex: 1;
}
```



#### 单页面代码量控制

当一个页面的业务逻辑特别复杂时，如果将所有的东西都写在一个页面的话，代码量将突破三四千行。这不利于后期的维护。

针对布局（template）中的页面：应当考虑按功能模块抽成模块组件

这对js（页面逻辑）：一部分跟随模块组件抽离出去，如果无法抽离的可使用mixin进行按功能划分（非必要也应该尽量少用mixin）

对于css：跟随模块组件抽离到各自的组件中

期望：代码能达到高内聚、低耦合。代码添加必要的注释。后期想改动哪部分的代码能不费力气的找到，并且查看的代码都是有用代码（避免维护时找代码还需要找半天，改代码可能还产生其他bug）



#### 全局状态管理

项目中全局状态管理使用的是vuex

使用vuex时应当遵循规范，业务代码只能调用actions处理业务，不应该在业务层直接调用commit直接修改状态。

vuex的状态流转流程应当是：业务调用actions层-->actions层处理完业务调用commit提交状态修改-->commit调用后mutations层接收到任务后才能修改state（状态）

vuex状态调用可配合getters使用

```
//业务层发起
this.$store.dispatch('family/updateMember', this.family_id)

//actions层业务处理
updateMember({commit},family_id) {
		if(family_id) {
			//...进行业务处理
			//提交状态修改请求
			commit('SAVE_MEMBER_KEY',family_id)
		}
}

//mutations层处理状态更改
SAVE_MEMBER_KEY(state, data) {
		state.memberKey = data
},


//全局状态的使用
import { mapGetters } from 'vuex'

computed: {
			...mapGetters('family', ['memberKey']),
},

<text>{{memberKey}}</text>
```



#### 分包（模块）划分粒度

模块划分粒度：以能独立运行的最小粒度划分

模块划分的粒度尽量细一些，但不是一味地越细越好。因把控在单个模块能独立运行的粒度（后期就能向搭积木一样，哪里需要哪里搬）。