vue-vite-ts

目录结构

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

排列规范

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

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

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

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

TS规范

• 不允许的操作
  • any 类型
  • JSON.parse 等危险操作时不嵌套异常处理
  • 单个文件中的脚本代码总行数不允许超过1024行
• 命名
  • 文件 小写字母命名，多个词之间以 -连接，不允许大写字母及驼峰式
  • 变量
  • 采用小驼峰，如 userName
  • 单字符变量名只允许在循环、循环回调中使用，可使用 i,j,k,m,n,t,v等
  • 函数
  • 采用小驼峰，如 shouUserName
  • .service.ts 文件中方法命名建议：
  • 类及类型
  • 采用大驼峰，如 UserService
  • 私有变量下划线+小驼峰，如 _innerType
• 类型及注释
  • 注释写法分以下几类 /** 这种用于简单描述函数作用 或 类成员变量用处 */ // 这种用于描述函数内变量或代码段作用 /**
  • 这种用于描述类、复杂函数用途及参数等 */
• 函数调用
  • async 在没有其它函数调用的情况下,写成.then
• 内置永久存储
  • 禁止使用localstore,已加入永久存储pina插件，多方面兼容存储包括indexdb store 等

CSS

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