# 家庭病床前端包 

## 环境

此项目使用 `pnpm`、`intelmt-plus`，开发前，请先全局安装 `pnpm`

```
> npm i pnpm -g
```

[`intelmt-plus`](http://ui.intelmt.com/zh-CN/) 是公司的统一 UI 组件库，要求 `node` 版本在 `16.13.0` 以上

npm代码在公司的 [私有仓库](http://maven.kasitesoft.com/) 上，`npm` 的地址为 http://maven.kasitesoft.com/repository/intelmt-npm-group/

在项目根目录的`.npmrc`文件里有定义npm组织地址
```
@kasite:registry=http://maven.kasitesoft.com/repository/intelmt-npm-group/
```


## vs code 插件（推荐）

| 插件名称                         | 作用                      |
| -------------------------------- | ------------------------- |
| Auto Close Tag                   | 自动补充闭合的标签        |
| Auto Rename Tag                  | 自动重命名标签            |
| EsLint                           | es-lint 校验              |
| formate: CSS/LESS/SCSS formatter | 样式格式化                |
| GitLens — Git supercharged       | 在代码界面可以看 git 记录 |
| Prettier - Code formatter        | 代码格式化                |
| Vetur                            | Vetur 校验                |

## 格式化配置

`ctrl + P` 输入 `>` 打开 `首选项：用户打开设置`，加入下面的 json

```json
{
  "editor.unicodeHighlight.ambiguousCharacters": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "prettier.printWidth": 160,
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  },
  "[less]": {
    "editor.defaultFormatter": "MikeBovenlander.formate"
  },
  "vetur.format.defaultFormatter.html": "prettyhtml",
  "vetur.format.defaultFormatterOptions": {
    "prettyhtml": {
      "printWidth": 120,
      "sortAttributes": true
    },
    "prettier": {
      "printWidth": 160
    }
  }
}
```

---

## 准备步骤：

1. 将 `views/demo/index.vue` 文件改成你所需要的文件名（包括 demo 文件夹的名字）
2. 将 `router/index.ts` 里所有带 `demo` 字样的名字改成你的首页文件名字（注意路由的路径要写正确，且路由要配两个，layout 下的和单页面的，参考 demo 路由的配置）
3. 修改 `config/config.js` 里的配置
4. 将 `utils/tool/common.ts` 下的 `getBaseUrl` 方法改成你需要请求的地址

> ### config.js 参数列表
>
> | 参数名         | 描述                      | 类型    | 值   |
> | -------------- | ------------------------- | ------- | ---- |
> | system         | 系统名称，网页 title      | String  | -    |
> | systemId       | 系统 ID，主要用于获取菜单 | Boolean | true |
> | title          | 登录后的菜单 name         | String  | -    |
> | index          | 登录后的首页              | String  | -    |
> | showBreadcrumb | 展示面包屑                | Boolean | true |

---

## 路由配置

如果开启了面包屑模式，建议子级页面放在父级的 children 里面 （子级页面没有显示在左侧菜单的情况）。例如：

```js
 {
    path: "/demo/index",
    name: "index",
    component: import("@/views/layout/layout.vue"),
    children: [
      {
        path: "",
        name: "index",
        meta: {
          title: "首页",
        },
        component: () => import("@/views/demo/index/index.vue"),
        children: [
          {
            path: "children",
            name: "index-children",
            meta: {
              title: "子页",
            },
            component: () => import("@/views/demo/index/children.vue"),
            children: [
              {
                path: "second-children",
                name: "index-second-children",
                meta: {
                  title: "孙子页",
                },
                component: () => import("@/views/demo/index/second-children.vue"),
              },
            ],
          },
        ],
      },
    ],
  }
```

---

## 图片存放

将需要的图片放入 `assets/images/*`

`*` 为 `views/demo` 的 `demo`

---

## 公共方法的调用

在页面 setup 中调用

```
proxy.$toolEntry.util.fn(方法名)
或
proxy.$toolEntry.common.fn(方法名)
```

## Api

### Api 文件树

```js
service
└─api
│   ├─base     // 基础的一些请求，登录之类的，基本上不动
│   ├─(common) // 可以放一些公共的请求
│   └─demo     // demo 文件夹下的请求
└─interfaceEntry.js
```

### Api 调用

```js
import { QueryDictList } from "@/service/api/demo/index";
or;
import * as api from "@/service/api/demo/index";

const queryDictList = async () => {
  const { res, resp } = await QueryDictList();
  // res：接口放回的所有数据，包括RespCode之类的数据
  // resp：只返回res.data.Data下的数据
};
```

---

## 页面模板

```html
<template>
  <div class="p_content">
    <div class="content_box">
      <div>内容</div>
    </div>
  </div>
</template>

<script setup lang="ts">
  ...
</script>

<style lang="scss" scoped>
  ...
</style>
```