# 成都环投项目web前端工程需知

该模板基于 `vite` + `vue3` + `typescript` ，集成内容如下：

1. `eslint` + `prettier` 代码规范格式化
2. `husky` + `lint-staged` git代码提交门禁
3. `axios` 接口通信 fetch
4. `pinia(vuex)` 状态管理工具
5. `less` 样式预处理 (已被删除，有些ui库的主题化使用sass/scss)

- 等待修复内容
  https://github.com/element-plus/element-plus/pull/14074

成都环投项目web项目背景：

1. 不考虑大屏
2. 不考虑移动端
3. 不需兼容ie项目

## 开发人员须知

开发人员初次加载该工程时，应注意事项

### 应有开发环境

`node > 16.0 & pnpm = 8.2.0 & git`

### vscode 应装插件

1. 必备插件

- Name: TypeScript Vue Plugin (Volar)
- Name: Vue Language Features (Volar)
- Name: Prettier - Code formatter
- Name: ESLint

2. 其他插件

- Name: Error Lens
- Name: GitLens — Git supercharged
- Name: Tailwind CSS IntelliSense

## 项目启动

1. 开发编译

```shell
pnpm run dev
```

2. 构建打包

```shell
pnpm run build
```

3. 打包内容预览

```shell
pnpm run preview
```

## npm 仓库

该工程 `npm` 仓库指向公司内网私服仓库，详情可见 `.npmrc` 文件配置。如仓库变动请更改 `registry` 参数

## 工程环境环境

一般环境变量是处于工程的根目录，但如果环境过多可能出现根目录文件冗杂的问题，因此本人将环境变量配置文件至 `configs/env` 文件夹进行管理。环境变量标头可自行配置：

```ts
  envDir: './configs/env',
  envPrefix: ['GCI_', 'VITE_'],
```

一般会出现三个环境

1. 开发环境
2. 测试环境
3. 生产环境（\*N）

## 工程目录规范

为防止出现工程文件管理位置混乱的情况，建议如下：

1. 路由路径对应 `views` 文件夹下路径层级

## UI库选型

- element-plus
  `element-plus` 底层写法为 `vue` 核心 + `scss`, 写法符合 `vue` 开发思路。社区活跃，拥有主题化配置和国际化配置功能

### css预处理选型

参考ui库选型选择 `scss`

其他选择：`tailwindcss` 原子化css开发

https://www.tailwindcss.com/docs

### Mock[废弃]

在后端接口未出来，而前端需要进行接口调整时，mock的作用就开始发挥了 ×

### 事件车 eventBus

由于状态管理工具用于跨组件通信可能会引起代码混乱，推荐引入事件车模型进行通信

详情请看 `src\hooks\useEventBus\index.ts`

### 字体库

为防止不同设备之间显示效果差异，推荐引入

1. 阿里巴巴普惠体
2. 思源黑体
3. 其他

### 异常性能监控[废弃]

可不考虑

### CI/CD[废弃]

jenkins/git action

https://doc.weixin.qq.com/doc/w3_AcwArQY_AM4X1Wywm5mTjqKqdQtbI?scode=AC4AwgfLAAovcTVrldAcwArQY_AM4&version=4.1.9.6012&platform=win

### 工具类

### lodash

按需引入

- 错误的使用方式

```ts
import { forEach } from 'lodash';
```

- 正确的使用方式

```ts
import forEach from 'lodash/forEach';
```

### vue-use