admin-sjzx/README.md

介绍

Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。

安装依赖&运行项目

node version:^18.17.0 || >=20.5.0"

#项目使用pnpm包管理器
npm i pnpm -g

#安装依赖
pnpm i

#运行项目
npm run dev

页面编写-示例

基础页面写法请查看`src/template`下的readme.md

开发规范

初衷：养成合理的习惯，精力留在技术调研、业务开发中。

常见点如下描述，更多的规范待前端开发人员有时间后，慢慢丰富。

• 命名风格：所有的包（文件夹）、文件名以小驼峰的风格命名，比如xxxAaa，禁止XxxAaa或者xxx-aaa。
• 命名语义：禁止中文命名或拼音，英文命名借用下工具，稍微准确一点，不要与实际业务相差太远。
• 功能组件创建风格：以功能名称命名文件夹，每个功能下以index.vue作为该功能的组件入口。正确示例参考：/src/views/auth/menu/index.vue。

• todo...：待后续补充。

开发助手

1、表格系列

• 页面表格以及表格页面按钮的弹出等功能参考：/views/pqs/voltageSags/sagGovern/index.vue
• 表格中需要替换数据：

// 通过formatter函数返回实际需要返回的值
    {
        title: '数据来源', field: 'dataSource', minWidth: '130',
        formatter: (row: any) => {
            return row.dataSource == 0 ? '离线导入' : '监测点同步'
        }
    }

2、样式系列

• 获取当前主体的高度：import { mainHeight } from '@/utils/layout'
• 弹框内输入框长度设置 1行1个 class="form-one" 1行2个 class="form-two"

依赖变更记录

• 2024-04-25新增vform3，by洪圣文，用于页面表单设计保存为json，命令：pnpm i vform3-builds