vue-vite-ts

vue3+TS+Eslint 多入口模板

注意

1. 默认安装:
   1. aixos
   2. js-md5
   3. pinia
   4. vue-router
   5. less
   6. naive-ui 
2. 子页面全局interface文件/pages/*/assets/js/interfacePublic.ts
3. 注意pinia 注册ID唯一性
4. 子页面全局ui组件引用 /pages/*/assets/js/nativeUiPluginPublic.ts
5. 本项目配置全局动态路由（各子页面单独添加route.ts）参考/pages/index/views/*/route.ts
6. 多入口无法同时使用web模式
7. 注意组件化

use

yarn 
yarn dev
yarn build

目录结构

| - `src`
|   - `pages`                     全局入口目录
|       - `index`                 首页html入口目录
|           - `assets`            子静态文件
|           - `components`        子组件
|           - `store`             子存储
|           - `views`             子页面
|           - `service`           子服务
|           - `App.vue`           子模板
|           - `main.ts`           子入口文件
|       - `admin`                 后台管理html入口目录
|           - `assets`            子静态文件
|           - `components`        子组件
|           - `store`             子存储
|           - `service`           子服务
|           - `views`             子页面
|           - `App.vue`           子模板
|           - `main.ts`           子入口文件
|       - `login`                 登录html入口目录
|           - `assets`            子静态文件
|           - `components`        子组件
|           - `store`             子存储
|           - `service`           子服务
|           - `views`             子页面
|           - `App.vue`           子模板
|           - `main.ts`           子入口文件
|   - `components`                全局组件
|   - `utils`                     全局插件
|   - `assets`                    全局静态文件

vue3 使用setup方式，注意格式

import { onMounted, ref, computed} from 'vue'
<script setup>
    <!-- 函数new区       -->
    const test = new DataServer()
    <!-- data 数据声明区 -->
      exp:
        const test=ref(1)
        const test1:computed(()=>test)

    <!-- function 调用区 -->
      exp:
       function name(){
          console.log(123)
        }

    <!-- 单独生命周期监听区 -->
      exp:
        onMounted(() => {test()})
</script>
<template></template>
<style></style>

编写规范

typescript 脚本

• 不允许的操作
  • 使用 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

• 类型及注释

  • 所有需要在外部被调用的接口需明确定义参数及返回值类型，直接使用typescript类型系统即可
  • 所有需要公共使用（即除了本模块使用，其他模块也会涉及到）的类型，主要是接口返回的数据定义类型，需要放在 src/types 目录中

  • 注释写法分以下几类

    /** 这种用于简单描述函数作用 或 类成员变量用处 */
    // 这种用于描述函数内变量或代码段作用
    /**
    * 这种用于描述类、复杂函数用途及参数等
    */
    

    scss 样式

• 不允许使用无封装或不唯一的全局类样式，必须使用时需备注说明并慎重选择类名

• 颜色赋值使用 var(--color-a) 写法，无特殊说明不允许直接赋值

• class, id 命名必须使用短线连接单词方式，如 form-label, list-item-title 等

• 多层级类名嵌套时，必须使用scss嵌套写法，以免污染其他样式，如

  .user-info {
  .pamel {
  .heaer {
    .title {
  
    }
  }
  }
  }