前后端基本架构和完全excel表的解析及统计图表的生成以及excel表的到出
This commit is contained in:
@@ -1,129 +1,67 @@
|
||||
> [!TIP]
|
||||
>
|
||||
> 注意，本文档仅为前端开发过程中团队交流使用，非正式的readme文档。
|
||||
|
||||
|
||||
> 以下为官方自带说明，请忽略（正文开始在下面）
|
||||
## 介绍
|
||||
|
||||
# 前端项目说明
|
||||
项目介绍
|
||||
|
||||
这是一个使用 Vue 3 和 Vite 的模板项目，帮助您开始开发。
|
||||
## 目录结构
|
||||
|
||||
## 推荐的 IDE 设置
|
||||
|
||||
[VS Code](https://code.visualstudio.com/) + [Vue (官方)](https://marketplace.visualstudio.com/items?itemName=Vue.volar)（并禁用 Vetur）。
|
||||
|
||||
## 推荐的浏览器设置
|
||||
|
||||
- 基于 Chromium 的浏览器（Chrome、Edge、Brave 等）：
|
||||
- [Vue.js 开发者工具](https://chromewebstore.google.com/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd)
|
||||
- [在 Chrome DevTools 中开启自定义对象格式化程序](http://bit.ly/object-formatters)
|
||||
- Firefox：
|
||||
- [Vue.js 开发者工具](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/)
|
||||
- [在 Firefox DevTools 中开启自定义对象格式化程序](https://fxdx.dev/firefox-devtools-custom-object-formatters/)
|
||||
|
||||
## TypeScript 对 `.vue` 导入的类型支持
|
||||
|
||||
TypeScript 默认无法处理 `.vue` 导入的类型信息，因此我们用 `vue-tsc` 替换了 `tsc` 命令进行类型检查。在编辑器中，我们需要 [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 让 TypeScript 语言服务识别 `.vue` 类型。
|
||||
|
||||
## 自定义配置
|
||||
|
||||
参见 [Vite 配置参考](https://vite.dev/config/)。
|
||||
|
||||
## 项目设置
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
├── README.md # 说明文档
|
||||
├── components.json # 组件库配置
|
||||
├── index.html # 入口文件
|
||||
├── package.json # 包管理
|
||||
├── postcss.config.js # postcss 配置
|
||||
├── public # 静态资源目录
|
||||
│ ├── favicon.png # 图标
|
||||
│ └── images # 图片资源
|
||||
├── src # 源码目录
|
||||
│ ├── App.tsx # 入口文件
|
||||
│ ├── components # 组件目录
|
||||
│ ├── contexts # 上下文目录
|
||||
│ ├── db # 数据库配置目录
|
||||
│ ├── hooks # 通用钩子函数目录
|
||||
│ ├── index.css # 全局样式
|
||||
│ ├── layout # 布局目录
|
||||
│ ├── lib # 工具库目录
|
||||
│ ├── main.tsx # 入口文件
|
||||
│ ├── routes.tsx # 路由配置
|
||||
│ ├── pages # 页面目录
|
||||
│ ├── services # 数据库交互目录
|
||||
│ ├── types # 类型定义目录
|
||||
├── tsconfig.app.json # ts 前端配置文件
|
||||
├── tsconfig.json # ts 配置文件
|
||||
├── tsconfig.node.json # ts node端配置文件
|
||||
└── vite.config.ts # vite 配置文件
|
||||
```
|
||||
|
||||
### 编译和热重载用于开发
|
||||
## 技术栈
|
||||
|
||||
```sh
|
||||
npm run dev
|
||||
Vite、TypeScript、React、Supabase
|
||||
|
||||
## 本地开发
|
||||
|
||||
首先进行包安装：
|
||||
```bash
|
||||
cd frontend #进入前端目录
|
||||
npm install #确定目录中有node_modules文件夹后输入命令安装依赖包
|
||||
```
|
||||
|
||||
### 类型检查、编译和生产环境压缩
|
||||
|
||||
```sh
|
||||
npm run build
|
||||
## 启动项目
|
||||
启动项目：
|
||||
```bash
|
||||
npm run dev #启动项目，需要确保后端已启动，否则前端功能无法使用
|
||||
```
|
||||
启动后在终端ctrl+左键点击项目地址打开浏览器，一般是http://localhost:5173
|
||||
|
||||
### 使用 [ESLint](https://eslint.org/) 进行代码检查
|
||||
|
||||
```sh
|
||||
npm run lint
|
||||
```
|
||||
记得在你根目录下的.gitignore文件中添加：
|
||||
|
||||
## vscode设置
|
||||
首先在插件库中安装`Vue`插件
|
||||
|
||||
选择官方的即可
|
||||
|
||||
## 构建
|
||||
在安装完`Node.js`后
|
||||
直接在项目根目录下（即xxx\FileReadSystem\）下运行
|
||||
```sh
|
||||
npm create vue@latest
|
||||
```
|
||||
项目名直接用frontend
|
||||
随后的选择如下:
|
||||
```
|
||||
✔ Project name: … frontend
|
||||
✔ Add TypeScript? … **Yes** (推荐，更好的类型支持)
|
||||
✔ Add JSX? … No / Yes (根据需要，一般不需要)
|
||||
✔ Add Vue Router for Single Page Application development? … **Yes** (需要路由)
|
||||
✔ Add Pinia for state management? … **Yes** (推荐，状态管理)
|
||||
✔ Add Vitest for Unit Testing? … No (测试，可以暂时不选)
|
||||
✔ Add an End-to-End Testing Solution? … No (端到端测试，暂时不选)
|
||||
✔ Add ESLint for code quality? … **Yes** (代码规范)
|
||||
✔ Add Prettier for code formatting? … **Yes** (代码格式化)
|
||||
```
|
||||
|
||||
实验特性不选就行
|
||||
|
||||
跳过所有示例代码，创建一个空白的Vue项目 Yes
|
||||
|
||||
完成后输入
|
||||
```sh
|
||||
cd frontend
|
||||
#随后输入
|
||||
npm install #确保frontend目录下有package.json文件
|
||||
```
|
||||
安装包完成后输入
|
||||
```sh
|
||||
npm run dev
|
||||
```
|
||||
以进入调试
|
||||
若终端出现：
|
||||
|
||||
说明构建成功，ctrl+鼠标左键点击第一个网址即可查看当前页面
|
||||
在终端输入q即可退出调试
|
||||
|
||||
## 关于`.gitignore`
|
||||
|
||||
根目录下`.gitignore`文件修改如下：
|
||||
```sh
|
||||
/.git/
|
||||
/.gitignore
|
||||
/.idea/
|
||||
/.vscode/
|
||||
/backend/venv/
|
||||
/backend/command/
|
||||
/backend/.env
|
||||
/backend/.env.local
|
||||
/backend/.env.*.local
|
||||
/backend/app/__pycache__/
|
||||
|
||||
# 前端忽略
|
||||
/frontend/*
|
||||
!/frontend/README.md
|
||||
!/frontend/image/
|
||||
# 在你自己构建好后，请删除上面这三行
|
||||
```bash
|
||||
/frontend/node_modules/
|
||||
/frontend/dist/
|
||||
/frontend/build/
|
||||
/frontend/.env
|
||||
/frontend/.vscode/
|
||||
/frontend/.idea/
|
||||
/frontend/*.log
|
||||
```
|
||||
```
|
||||
Reference in New Issue
Block a user