|
@@ -13,10 +13,10 @@
|
|
|
| - `services` 全局服务
|
|
| - `services` 全局服务
|
|
|
| - `assets` 全局静态文件
|
|
| - `assets` 全局静态文件
|
|
|
```
|
|
```
|
|
|
-## 编写规范
|
|
|
|
|
|
|
+### 排列规范
|
|
|
```
|
|
```
|
|
|
import { onMounted, ref, computed} from 'vue'
|
|
import { onMounted, ref, computed} from 'vue'
|
|
|
-<script setup>
|
|
|
|
|
|
|
+<script setup lang="ts">
|
|
|
<!-- 函数new区 -->
|
|
<!-- 函数new区 -->
|
|
|
const test = new DataServer()
|
|
const test = new DataServer()
|
|
|
|
|
|
|
@@ -28,16 +28,12 @@ import { onMounted, ref, computed} from 'vue'
|
|
|
function name(){
|
|
function name(){
|
|
|
console.log(123)
|
|
console.log(123)
|
|
|
}
|
|
}
|
|
|
- test().then(res=>{})
|
|
|
|
|
|
|
|
|
|
<!-- vue 方法区 -->
|
|
<!-- vue 方法区 -->
|
|
|
onMounted(() => {test()})
|
|
onMounted(() => {test()})
|
|
|
-
|
|
|
|
|
</script>
|
|
</script>
|
|
|
-<template></template>
|
|
|
|
|
-<style></style>
|
|
|
|
|
```
|
|
```
|
|
|
-### TS
|
|
|
|
|
|
|
+### TS规范
|
|
|
* 不允许的操作
|
|
* 不允许的操作
|
|
|
* `any` 类型
|
|
* `any` 类型
|
|
|
* `JSON.parse` 等危险操作时不嵌套异常处理
|
|
* `JSON.parse` 等危险操作时不嵌套异常处理
|
|
@@ -45,20 +41,14 @@ import { onMounted, ref, computed} from 'vue'
|
|
|
* 命名
|
|
* 命名
|
|
|
* 文件 小写字母命名,多个词之间以 `-`连接,不允许大写字母及驼峰式
|
|
* 文件 小写字母命名,多个词之间以 `-`连接,不允许大写字母及驼峰式
|
|
|
* 变量
|
|
* 变量
|
|
|
- * 小写字母开头的驼峰式,如 `userName`
|
|
|
|
|
- * 必须使用英文单词或有意义的拼音
|
|
|
|
|
|
|
+ * 采用小驼峰,如 `userName`
|
|
|
* 单字符变量名只允许在循环、循环回调中使用,可使用 `i,j,k,m,n,t,v`等
|
|
* 单字符变量名只允许在循环、循环回调中使用,可使用 `i,j,k,m,n,t,v`等
|
|
|
* 函数
|
|
* 函数
|
|
|
- * 小写字母开头的驼峰式,如 `shouUserName`
|
|
|
|
|
|
|
+ * 采用小驼峰,如 `shouUserName`
|
|
|
* `.service.ts` 文件中方法命名建议:
|
|
* `.service.ts` 文件中方法命名建议:
|
|
|
- * 集合类数据获取采用 `loadUsers` 之类的命名,即以 `load`开头并以获取数据名结尾
|
|
|
|
|
- * 单个数据获取采用 `fetchTemplate` 之类的命名,以`fetch`开头并以数据名结尾
|
|
|
|
|
- * 保存数据采用 `saveFlow` 之类的命名
|
|
|
|
|
- * 删除数据采用 `removeTemplate` 之类的命名
|
|
|
|
|
* 类及类型
|
|
* 类及类型
|
|
|
- * 大写字母开头的驼峰式,如 `UserService`
|
|
|
|
|
- * 私有变量以下划线接小写字母开头的驼峰式,如 `_innerType`
|
|
|
|
|
- * 全局常量,下划线连接大写字母,如 `GROUP_TYPES`
|
|
|
|
|
|
|
+ * 采用大驼峰,如 `UserService`
|
|
|
|
|
+ * 私有变量下划线+小驼峰,如 `_innerType`
|
|
|
* 类型及注释
|
|
* 类型及注释
|
|
|
* 注释写法分以下几类
|
|
* 注释写法分以下几类
|
|
|
/** 这种用于简单描述函数作用 或 类成员变量用处 */
|
|
/** 这种用于简单描述函数作用 或 类成员变量用处 */
|
|
@@ -68,13 +58,11 @@ import { onMounted, ref, computed} from 'vue'
|
|
|
*/
|
|
*/
|
|
|
* 函数调用
|
|
* 函数调用
|
|
|
* async 在没有其它函数调用的情况下,写成.then
|
|
* async 在没有其它函数调用的情况下,写成.then
|
|
|
|
|
+* 内置永久存储
|
|
|
|
|
+ * 禁止使用localstore,已加入永久存储pina插件,多方面兼容存储包括indexdb store 等
|
|
|
|
|
|
|
|
### CSS
|
|
### CSS
|
|
|
* 不允许使用无封装或不唯一的全局类样式,必须使用时需备注说明并慎重选择类名
|
|
* 不允许使用无封装或不唯一的全局类样式,必须使用时需备注说明并慎重选择类名
|
|
|
* 颜色赋值使用 `var(--color-a)` 写法,无特殊说明不允许直接赋值
|
|
* 颜色赋值使用 `var(--color-a)` 写法,无特殊说明不允许直接赋值
|
|
|
* `class, id` 命名必须使用短线连接单词方式,如 `form-label`, `list-item-title` 等
|
|
* `class, id` 命名必须使用短线连接单词方式,如 `form-label`, `list-item-title` 等
|
|
|
-* 多层级类名嵌套时,必须使用`scss`嵌套写法,以免污染其他样式
|
|
|
|
|
-
|
|
|
|
|
-### Notice
|
|
|
|
|
-* 框架使用解构,注入方式
|
|
|
|
|
-* 自行增加.env.development 测试环境变量
|
|
|
|
|
|
|
+* 多层级类名嵌套时,必须使用`scss`嵌套写法,以免污染其他样式
|