148 lines
2.9 KiB
Markdown
148 lines
2.9 KiB
Markdown
# 成都环投项目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
|