北冥坞系统前端开发指南

技术栈

项目基于 Vue3 + TypeScript + Vite + Vuetify 开发，使用 pnpm-workspace 多包管理。

构建工具：Vite
前端框架：Vue3
UI框架：Vuetify
路由：Vue Router
状态管理：Vuex

目录结构

项目的目录结构如下：

/

.eslintignore
.eslintrc.cjs
.prettierignore
.prettierrc
README.md
package.json
packages
- admin
  - .env
  - README.md
  - index.html
  - package.json
  - public
  - src
  - tsconfig.json
  - vite.config.ts
  - windi.config.ts
- hooks
  - package.json
  - src
  - tsconfig.json
  - tsup.config.ts
- locale
  - package.json
  - src
  - tsconfig.json
  - tsup.config.ts
- main
  - .env
  - index.html
  - package.json
  - public
  - src
  - tsconfig.json
  - vite.config.ts
  - windi.config.ts
- types
  - index.d.ts
  - package.json
  - src
  - tsconfig.json
  - tsup.config.ts
pnpm-lock.yaml
pnpm-workspace.yaml
shim-vue.d.ts
tsconfig.eslint.json
tsconfig.json
tsup.config.ts

其中有以下几个包：

admin：管理员系统
main：主系统
hooks：自定义 hooks
locale：国际化
types：类型定义

配置环境

安装必要的依赖

bash

cd frontend
npm i -g pnpm
pnpm i

cd frontend
npm i -g pnpm
pnpm i

开发主系统

bash

pnpm dev:main

pnpm dev:main

开发管理员系统

bash

pnpm dev:admin

pnpm dev:admin

构建

bash

pnpm build

pnpm build