您现在的位置是：首页 >其他 >vue3编码规范网站首页其他

# 代码规范

**[eslint 规则](https://eslint.bootcss.com/docs/rules/)**

**[stylelint 规则](https://stylelint.bootcss.com/user-guide/rules/list#rules)**

**[stylelint-scss 规则](https://github.com/stylelint-scss/stylelint-scss/tree/master/src/rules)**

**[eslint-vue 规则](https://eslint.vuejs.org/rules)**

**[eslint-typescript 规则](https://typescript-eslint.io/rules/)**

**[CSS:BEM 命名规范](https://juejin.cn/post/6844903672162304013)**

暂未使用 stylelint-selector-bem-pattern 插件

---

## 一、项目结构

- **api** 接口目录 根据模块命名 接口函数的参数 interface 声明写在当前函数上方

- **components** 组件 公共组件放入此处，私有化组件放在同页面目录下新建文件夹即可

- **config** 配置文件

- **dict** 静态字典 与枚举等

- **hooks**

- **libs** 第三方或手动引入的 js/ts 文件

- **pages** 页面 后续根据分包构建文件夹

-   **static**

    - **image** 图片

    - **icon** 图标

- **store** *全局 store 项目采用 **pinia** 代替 vuex* **[pinia](https://pinia.web3doc.top/)**

- **styles** 存放全局公共样式

    - 统一引入到 style/global.scss 中

    - style/colors.scss 存放基础颜色变量

    - 存放

- **types** ts 声明文件目录

    - 由根目录 index.d.ts 中 reference 引入声明

    - 此处只存放公共声明，私有声明在自己的 vue 文件里进行，如有缺失请继承公共声明

- **utils** 存放公共自定义方法

    - http 存放接口封装

    - common 存放公共工具函数

    - 可根据功能增加自定义工具文件

    - **check 工具函数统一引用 dict 中存入的字典与枚举**

***若有新增分包或者文件夹，请在此处新增说明***

---

## 二、命名规范

### **（1）CSS**

- **Atomic CSS** 原子化 css。全局文件，存储在/src/style/atomic.scss 中

- 目前采用 **atomic + BEM + common class**

- 禁止状态统一使用 **disabled**

- 选中状态统一使用 **active** 或者 **selected**

- 统一采用**BEM**命名规范 即 ***Block__Emelemt--modifier***。 B、E 单独用 “-” 减号连接 如 ***banner__sub-title--selected***

**PS：css 逻辑属性等新特性暂不建议使用**

---

### **（2）TS 与 JS**

- **函数**

    ```javascript

    const func = () => {}

    ```

- **接口函数** 统一以 **api** 结尾 如 ***getUserInfoApi****

- **变量** 统一采用 **小驼峰**

- **类名** 统一采用 **大驼峰**

- **常量** 统一使用 **全大写，下划线连接**

- **引号** 统一使用 **双引号**

- **注释**

    1. 简单函数

    ```javascript

    // 使用双斜线描述功能即可

    ```

    2. 复杂函数

    ```javascript

    /**

     * @author

     * @desc 功能描述

     * @param { paramType } paramName 变量说明

     * @return 有返回值务必描述

     */

    ```

- **其他**

    1. 句尾无分号

    2. 统一使用 **class** 声明对象

    3. 禁止同一函数出现两层以上 for 循环，复杂逻辑请封装为工具函数

    4. check 尽量使用 **switch** 而不是 if

    5. 多个 if 务必写上**注释**

    6. 代码中尽量不要出现 undefined

    7. 判断 undefined 尽量使用断言关键字 **??**

    8. 对象取值，采用 **?.** 防止报错

    9. **逻辑函数能封装则封装**

    10. 数组查询是否有该元素，使用 **includes()** 函数，而查找索引则使用 **findIndex()** 函数。 **尽量少使用 indexOf**

    11. 能确定不为空的参数，赋值时使用 **!.**

---

### （3）文件命名

- **VUE 文件** 采用 **短横线**

- **JS/TS** 采用 **小驼峰**，尽量不用多单词

- **CSS** 采用 **下划线**

- **组件** 同 VUE 采用 **短横线**

    - 根据业务和 ui 封装的公共组件，统一采用 **ws-xxx** 方式命名，如 **ws-button ws-nav-bar**

    - 基础组件，不需要 prop 和传值的，统一采用 **base-xxx** 方式命名，如 **base-footer**

    - 单一页面文件的组件，采用 **page-component** 的方式命名，如 **envelope-dialog**

- **注** 页面与组件的命名，统一采用 **page-block/function** 的方式 如 **envelope-header envelope-tab-bar**

---

## 三、VUE 编码

- 统一采用 composition api 模式

    ```javascript

    let xyState = reactive({

        x: 'x',

        y: 'y'

        z: {

            a: 'a'

        }

    })

    const xFunc ...

    const { x, y, z } = toRefs(State)

    // 注意，template中直接使用需要toRefs，或者不toRefs，template中直接使用xyState.x

    ```

- **顺序**

    1. variable/props

    2. computed

    3. life cycle

    4. methods

    5. wxPageApi/uniPageApi **etc. onShareAppMessage onPulldownRefresh**

    -   **注** hook 和 store 等根据功能放入每个功能块中，顺序在函数前即可

- **其他**：template 中的 h5，尽量同行显示

---

## 四、PINIA 编码

```javascript

import { defineStore } from "pinia"

export const useCounterStore = defineStore("counter", {

    state: () => ({

        count: 1

    }),

    actions: {

        increment() {

            this.count++

        }

    },

    getters: {

        doubleCount(state) {

            return state.count * 2

        }

    }

})

```

---

## 五、TS 声明

```typescript

    // type用于单一类型数据

    type RequestMethod = "GET" | "POST"

    // interface用于对象

    interface BaseData = {

        a: string

        b?: string

    }

    // variable

    const b: number = 1

    // ref

    const a = ref<string>('a')

    // reactive

    const baseData = reactive<BaseData>({

        a: 'a'

    })

    // function

    const foo = (a: number, b: number): number => {

        return a + b

    }

    // 解构 如有需要，尽量声明后再解构

    const { a, b: b_rename }: Obj = objData

    // 数组

    const baseList = ref<string[]>()

```

---

### package.json 依赖升级（谨慎）

1. npm install -g npm-check-updates

2. ncu -u

3. npm update