com.kasite.client.business.ui.membership

开发指南

环境

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

> npm i pnpm -g

intelmt-plus 是公司的统一 UI 组件库，要求 node 版本在 16.13.0 以上

npm代码在公司的 私有仓库 上，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

{
  "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 里面 （子级页面没有显示在左侧菜单的情况）。例如：

 {
    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 文件树

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

Api 调用

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下的数据
};

---

页面模板

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

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

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