# map

**Repository Path**: cheemsjh/map

## Basic Information

- **Project Name**: map
- **Description**: 1231321412414241
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/cheemsjh/map/settings#index
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-04-13
- **Last Updated**: 2023-04-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# IMC 子应用启动前端工程

工程原则

机器 > 约定 > 配置。

所有规范需要利用机器约束才靠谱。我们会尽量运用工程化的思想，利用现有的工具集和最佳实践，在编译阶段自动规范并检测我们的约定。

## 开发环境装备

### 基本环境搭建

- node 最新版
- 安装 node 后会自动安装 npm
- 安装 pnpm 作为包管理工具 `npm install pnpm -g`
- 推荐使用 VsCode 作为编辑器

运行以下命令确保开发环境是否准备好：

```shell
node -v
pnpm -v
```
## 快速开始

从仓库中克隆工程

```shell
// SSH
git clone git@ssh.dev.azure.com:v3/HXGNPPMGCDev/IMC/imc-sub-app-vue-starter


// HTTPS
git clone https://HXGNPPMGCDev@dev.azure.com/HXGNPPMGCDev/IMC/_git/imc-sub-app-vue-starter
```

## 安装依赖

IMC 生态圈中的依赖托管在 azure 的 npm 仓库，具体地址为 https://dev.azure.com/HXGNPPMGCDev/IMC/_artifacts/feed/IMC-FE。

根目录中的 `.npmrc` 文件已经为该工程配好代理：

```bash
pnpm install

// 开发
pnpm dev

// 构建
pnpm build

// 预览
pnpm preview
```


## 基础技术栈选型

- Vue：渐近式 JavaScript 框架。
- TypeScript：JavaScript 的超集，赋予了 JavaScript 静态类型检查的能力。
- pinia: Vue 的存储库，它允许您跨组件/页面共享状态。
- @vueuse/core: Vue 的组合式工具库。

## 运行环境

利用微前端架构的思想，该工程作为基座工程的其中一个子工程存在。

该工程只需要关注业务开发，诸如用户，权限等公共逻辑不用参与。

基座工程的集成功能持续开发中。

## 入口文件

`src/main.ts` 为该工程的启动代码文件，代码内进行了判断，若在独立环境下则直接启动，若在微前端环境下则进行子应用加载逻辑，具体参考该文件内的代码注释。

除此之外，该文件还执行了以下任务：

- 与基座工程进行数据交互。
- 渲染路由

## 第一个页面

### 路由

页面路由通过创建文件自动生成

### 添加一个页面

在 `src/views` 目录下创建 `.vue` 文件即可。

比如创建 `src/views/a/index.vue`，则会自动创建路由 `/a`

具体的文件目录和路由的对应关系详见：https://github.com/hannoeru/vite-plugin-pages。

## 代码质量和风格

维持优秀的代码质量能够让整个项目更加容易维护和迭代。

### TS/JS 质量

ESLint 是一个针对于 JavaScript/TypeScript 语言的集代码审查和修复的工具，它的核心功能是通过配置一个个规则来限制代码的合法性和风格。

脚手架内置了 ESLint 工具，通过 `/eslintrc.js` 引入了 IMC 团队规范 `eslint-config-imc` 预设了一些规则。

### EditorConfig

EditorConfig 帮助开发者在多个开发者和多个编辑器之间保持代码风格的统一。

脚手架通过 `/.editorconfig` 预设了部分规则，开发者只需保证使用的编辑器有相应的功能即可，这样就能保证在打开单文件时就能通过这些规则进行代码风格上的格式化操作。

### 检测时机

工程上通过 husky，利用 gitHooks 提供给我们的钩子，在 pre-commit 之前会对相应的文件进行代码质量的检测并尝试进行自动修复，如果自动修复不成功，会直接拒绝提交，从而保证了代码质量的规范性。

## 提交规范

规范的 commit 信息能让人一眼清晰明了的知道该提交属于什么类型、修改范围、具体改动，提高团队协作。也方便我们日后找 bug，提高团队协作。

### Commit Message 规范

我们的脚手架中内置了相关工具，对 commit message 的格式进行了生成和约束，具体表现为：

```shell
// before
git commit -m 'commit message'

// this project
pnpm commit
```

该工程通过 cz-customizable 来实现符合团队实际场景的 commit message 格式要求。团队可以通过 `/.cz-config.js` 文件来自定义要求，目前提供了一份初始配置。

### Commit Message 检查规则

当然，开发者可以直接绕过 cz 命令直接提交不符合脚手架规定的 commit message 格式的信息，所以我们选取了 commitlint 来帮助我们检查规则，如果不符合规范，直接拒绝提交。

### Commit Message 检查时机

工程上通过 husky，利用 gitHooks 提供给我们的钩子，在 commit 之前会对 commit message 进行 commitlint 操作，如果检测到不符合规范，会直接拒绝提交，从而保证了提交的规范性。

## 数据管理

任何大型的项目都需要数据管理，我们借用了 Vue 生态圈配套的 Pinia 去管理复杂的数据，详见：https://pinia.web3doc.top/introduction.html。