项目说明

2022/3/14 · less than a minute read

注:下面使用 ~ 代表项目根目录,使用 @ 代表 src 目录

一. 环境

  • nodejs
  • pnpm、yarn、npm 等任意包管理器

不存在 node_modules 文件夹使用包管理器先安装依赖,例如 pnpm install

二. 启动、编译、部署

1. 启动

启动使用:

# pnpm
pnpm dev
# npm
npm run dev

2. 编译

使用命令:

pnpm build
# 或
npm run build

编译结果会放在 ~/dist 文件夹中

3. 部署

~/dist 文件夹下的文件为 html 静态文件,可使用 nginx node 服务等方式部署

  1. express

    在云服务器上有个 express-cloud 文件夹,将 dist 文件夹放到 express-cloud 下,执行 node app.js 即可。

    可以使用 pm2 等进程守护程序启动

    pm2 start app.js --name client #启动并命名为 client
    pm2 restart client # 重启
    pm2 stop client # 关闭
    ...
    
  2. nginx

三、项目配置流程

1. 项目结构

.
├── public
└── src	源代码目录
    ├── assets	资源目录
    │   ├── icon	图标资源
    │   ├── images	图片资源
    │   └── js
    │       └── rules	表单验证规则
    ├── components
    │   ├── account	帐号管理页面组件
    │   ├── bridge-card	大桥证组件
    │   ├── car	车辆管理组件
    │   ├── common	公共组件(例:Header
    │   ├── receipt	小票管理组件
    │   └── register	注册页组件
    ├── config	对角色或Api接口的配置
    ├── global	全局常量
    ├── hooks	一些页面的处理逻辑
    │   ├── bridge-card-detail
    │   ├── bridge-card-stat
    │   ├── fleet
    │   ├── receipt-detail
    │   └── receipt-stat
    ├── mock	模拟数据
    ├── router	路由
    ├── store	状态管理
    ├── utils	工具目录
    └── views	一些页面
        └── base 404/403

29 directories

2. 添加管理员类型

配置文件:@/config/role

  1. roleMap 中添加角色

    • 下标对应数据库中的 adminType
    • name 为任意给定英文字段
    • zhName 为对应中文名
    export const roleMap = [
      {
        name: "systemManage",
        zhName: "系统管理员",
      },
      {
        name: "fleetManage",
        zhName: "车队管理员",
      },
      {
        name: "bridgeCardManage",
        zhName: "大桥证管理员",
      },
    
      // 例如添加市场部管理员
      {
        name: "marketManage",
        zhName: "市场部管理员",
      },
    ];
    
  2. 为新添角色添加页面访问权限