README.md 2.9 KB

目录结构

| - `src`
|   - `pages`                     入口目录
|           - `assets`            静态文件
|           - `components`        组件
|           - `store`             存储
|           - `views`             页面
|           - `service`           服务
|           - `App.vue`           模板
|           - `main.ts`           入口文件
|   - `components`                全局组件
|   - `services`                  全局服务
|   - `assets`                    全局静态文件

编写规范

import { onMounted, ref, computed} from 'vue'
<script setup>
    <!-- 函数new区  -->
    const test = new DataServer()

    <!-- data 声明区 -->
    const test=ref(1)
    const test1:computed(()=>test)

    <!-- fn 声明区 -->
    function name(){
      console.log(123)
    }
    test().then(res=>{})

    <!-- vue 方法区 -->
    onMounted(() => {test()})

</script>
<template></template>
<style></style>

TS

  • 不允许的操作
    • any 类型
    • JSON.parse 等危险操作时不嵌套异常处理
    • 单个文件中的脚本代码总行数不允许超过1024
  • 命名
    • 文件 小写字母命名,多个词之间以 -连接,不允许大写字母及驼峰式
    • 变量
    • 小写字母开头的驼峰式,如 userName
    • 必须使用英文单词或有意义的拼音
    • 单字符变量名只允许在循环、循环回调中使用,可使用 i,j,k,m,n,t,v
    • 函数
    • 小写字母开头的驼峰式,如 shouUserName
    • .service.ts 文件中方法命名建议:
      • 集合类数据获取采用 loadUsers 之类的命名,即以 load开头并以获取数据名结尾
      • 单个数据获取采用 fetchTemplate 之类的命名,以fetch开头并以数据名结尾
      • 保存数据采用 saveFlow 之类的命名
      • 删除数据采用 removeTemplate 之类的命名
    • 类及类型
    • 大写字母开头的驼峰式,如 UserService
    • 私有变量以下划线接小写字母开头的驼峰式,如 _innerType
    • 全局常量,下划线连接大写字母,如 GROUP_TYPES
  • 类型及注释
    • 注释写法分以下几类 /** 这种用于简单描述函数作用 或 类成员变量用处 */ // 这种用于描述函数内变量或代码段作用 /**
    • 这种用于描述类、复杂函数用途及参数等 */
  • 函数调用
    • async 在没有其它函数调用的情况下,写成.then

CSS

  • 不允许使用无封装或不唯一的全局类样式,必须使用时需备注说明并慎重选择类名
  • 颜色赋值使用 var(--color-a) 写法,无特殊说明不允许直接赋值
  • class, id 命名必须使用短线连接单词方式,如 form-label, list-item-title
  • 多层级类名嵌套时,必须使用scss嵌套写法,以免污染其他样式

Notice

  • 框架使用解构,注入方式
  • 自行增加.env.development 测试环境变量