49 lines
1.9 KiB
Markdown
49 lines
1.9 KiB
Markdown
#### 介绍
|
||
Vue 3 + TypeScript + Vite这个模板可以帮助您开始使用Vue 3和TypeScript在Vite中进行开发。该模板使用了Vue 3的<script setup>单文件组件，请查看script setup文档了解更多信息。
|
||
|
||
#### 安装依赖&运行项目
|
||
> node version:^18.17.0 || >=20.5.0"
|
||
```shell
|
||
#项目使用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
|
||
* 表格中需要替换数据：
|
||
```js
|
||
// 通过formatter函数返回实际需要返回的值
|
||
{
|
||
title: '数据来源', field: 'dataSource', minWidth: '130',
|
||
formatter: (row: any) => {
|
||
return row.dataSource == 0 ? '离线导入' : '监测点同步'
|
||
}
|
||
}
|
||
```
|
||
##### 2、样式系列
|
||
* 获取当前主体的高度：import { mainHeight } from '@/utils/layout'
|
||
|
||
#### 依赖变更记录
|
||
|
||
* 2024-04-25新增vform3，by洪圣文，用于页面表单设计保存为json，命令：pnpm i vform3-builds
|