aps-test/as-system-manage-web

灯塔APS开发指南

::: tip 说明

本技术文档主要用于熟悉如何快速熟悉灯塔APS后端管理平台项目, 并快速介入自身业务开发。

:::

技术栈

vue3 + pinia + vue-router + + element-plus + typescript + vite + pnpm

项目结构

├── /public/                  # 非组件静态资源
├── /src/                     # 源码目录
│ ├── /api/                   # 业务请求接口
│ ├── /assets/                # 组件静态资源(图片)
│ ├── /components/            # 公共组件（包含基础组件）
| ├── /config/                # 全局变量配置
│ ├── /directives/            # 自定义指令
│ ├── /hooks/                 # 自定义hook钩子
│ ├── /instance/              # 交互组件实例（Modal, Message）
│ ├── /router/                # 页面路由
│ │ ├── /guard/               # 页面路由守卫
│ │ ├── /helper/              # 路由相关处理函数
│ │ ├── /routes/              # 页面路由配置
│ ├── /service/               # 服务请求配置
│ │ ├── /request/             # 服务请求相关函数
│ │ ├── index.ts              # 请求配置入口
│ ├── /store/                 # 状态管理
│ ├── /utils/                 # 工具函数
│ ├── /views/                 # 路由组件(页面维度)
│ ├── App.vue                 # 组件入口
│ └── main.js                 # 程序入口
├── /types/                   # TS类型声明文件
├── .commitlintrc.js          # git提交钩子配置
├── .env.development          # 开发环境配置
├── .env.production           # 生产环境配置
├── .env.test                 # 测试环境配置
├── .eslintignore             # ES6规范忽略文件
├── .eslintrc.json            # ES6语法规范配置
├── .gitignore                # git忽略文件
├── .pretterigone             # 代码风格检查忽略文件
├── .pretterrc.json           # 代码风格配置
├── .stylelintigone           # 样式规范检查忽略文件
├── .stylelintrc.json         # 样式规范配置
├── .changelog-option.js      # git提交日志配置
├── index.html                # 页面入口
├── package.json              # 项目依赖
├── README.md                 # 项目文档
├── tsconfig.json             # TS类型检查配置
└── vite.config.ts            # 项目构建配置

强调

vite.config.js 中根据自己接口开发联调判断是否需配置 rewrite 选项

server: {
    host: true,
    proxy: {
        [`${loadEnv(mode, process.cwd()).VITE_APP_BASE_API}`]: {
            rewrite: path => path.replace(/^\/api/, ''), // 路径重写，将请求路径中带 /api 路参替换。
            target: loadEnv(mode, process.cwd()).VITE_APP_PROXY_URL, // 你请求的第三方接口
            changeOrigin: true // 允许本地服务器请求跨域
        }
    }
}

运行项目

:::tip 建议 项目使用 pnpm 包管理工具管理项目依赖与项目运行 :::

# 安装依赖
pnpm install

# 启动本地开发服务
pnpm run dev

其他命令

# 生产环境构建
pnpm run build

# 测试环境构建
pnpm run build:test

# 开发环境文档构建
pnpm run docs:dev

# 生产环境文档构建
pnpm run docs:build

# Eslint语法检查
pnpm run lint:eslint

# Stylelint样式风格检查
pnpm run lint:stylint

# 命令式git代码规范提交
pnpm run cz

# 生成发布版本日志
pnpm run changelog

# 本地启动模拟生产环境静态服务器，默认端口：4173
pnpm run preview

# 开启 git hooks
# 注意：如果项目未远程仓库初始化，请先执行 git init，再执行以下操作
pnpm run prepare