FilesReadSystem/frontend/README.md

Tip

注意，本文档仅为前端开发过程中团队交流使用，非正式的readme文档。

以下为官方自带说明，请忽略，并在你完成前端环境构建后，把此README.md移动到frontend目录下，替换自动生成的那个（正文开始在下面）

前端项目说明

这是一个使用 Vue 3 和 Vite 的模板项目，帮助您开始开发。

推荐的 IDE 设置

VS Code + Vue (官方)（并禁用 Vetur）。

推荐的浏览器设置

• 基于 Chromium 的浏览器（Chrome、Edge、Brave 等）：
  • Vue.js 开发者工具
  • 在 Chrome DevTools 中开启自定义对象格式化程序
• Firefox：
  • Vue.js 开发者工具
  • 在 Firefox DevTools 中开启自定义对象格式化程序

TypeScript 对 .vue 导入的类型支持

TypeScript 默认无法处理 .vue 导入的类型信息，因此我们用 vue-tsc 替换了 tsc 命令进行类型检查。在编辑器中，我们需要 Volar 让 TypeScript 语言服务识别 .vue 类型。

自定义配置

参见 Vite 配置参考。

项目设置

npm install

编译和热重载用于开发

npm run dev

类型检查、编译和生产环境压缩

npm run build

使用 ESLint 进行代码检查

npm run lint

vscode设置

首先在插件库中安装Vue插件 选择官方的即可

构建

在安装完Node.js后 直接在项目根目录下（即xxx\FileReadSystem\）下运行

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** (代码格式化)

完成后输入

cd frontend
#随后输入
npm install #确保frontend目录下有package.json文件

安装包完成后输入

npm run dev

以进入调试 若终端出现： 说明构建成功，ctrl+鼠标左键点击第一个网址即可查看当前页面 在终端输入q即可退出调试