成都环投项目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. 开发编译

pnpm run dev

2. 构建打包

pnpm run build

3. 打包内容预览

pnpm run preview

npm 仓库

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

工程环境环境

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

  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

按需引入

• 错误的使用方式

import { forEach } from 'lodash';

• 正确的使用方式

import forEach from 'lodash/forEach';

vue-use