Frontend Prototype

项目简介

本项目为前端原型项目，用于快速搭建和验证前端功能模块，基于Vue3 + Vite构建，包含基础布局、路由、状态管理及常用组件。

技术栈

• 框架：Vue 3（组合式API）
• 构建工具：Vite 4
• 状态管理：Pinia
• 路由：Vue Router
• CSS预处理：SCSS
• 网络请求：axios（封装在http-client.ts）
• 组件库：Element Plus（按需引入）

项目结构

frontend_prototype/
├── public/          # 静态资源（不会被Vite处理）
├── src/
│   ├── assets/      # 资源文件（图片、字体等，会被Vite处理）
│   ├── components/  # 通用组件
│   ├── features/    # 功能模块说明
│   ├── hooks/       # 自定义组合式函数
│   ├── http/        # 网络请求封装
│   ├── layout/      # 布局组件
│   ├── router/      # 路由配置
│   ├── store/       # 状态管理
│   ├── styles/      # 全局样式、变量、混合
│   ├── types/       # 类型声明
│   ├── utils/       # 工具函数
│   ├── views/       # 页面组件
│   ├── App.vue      # 根组件
│   └── main.ts      # 入口文件
├── .env*            # 环境变量配置
├── vite.config.ts   # Vite配置
└── package.json     # 依赖及脚本配置

开发指南

环境要求

• Node.js ≥ 16.0.0
• npm ≥ 7.0.0 或 pnpm ≥ 6.0.0

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 查看效果。

构建生产版本

npm run build

产物输出到 dist/ 目录。

代码规范

• 代码格式化：Prettier（通过.prettierrc.js配置）
• CSS规范：Stylelint（通过.stylelintrc配置）
• Git提交规范：推荐使用Conventional Commits格式

I18n使用指南

项目国际化使用i8n tools插件，为配合插件使用架构层面需做以下规则；

格式要求

1. key的命名只支持 所在文件夹-文件名-随机号 的格式，所以为了溯源views/features层级设计上子文件夹必须用-带上上级文件夹的名字，例如：views/test/test-a1/test-a1-a2/index.vue；
2. zh_cn中提供一份基础词库，在实际项目中可根据情况在代码编写之前先行拓展；
3. 插件具有记忆能力，在zh_cn中翻译过的key会持续使用，不会生成新key；所以如果有不需要插件记忆或需要特殊处理的词条，请放在zh_cn_extra中；
4. 原则上只允许vue文件，也就是views、features(layout、components建议手动处理)文件夹下的文件支持国际化，禁止ts文件国际化，所以ts文件原则上不允许调用类似Elmessage的组件；
5. 由于插件会检测所有中文字符串，所以在vue文件中禁止使用非必要的中文字段，比如img标签的alt属性等；

手动处理项

1. 提前写入项目的默认词库、专有名词词库，在extra中写入菜单及路由词库；
2. 插件会在i18n文件夹自动生成一个index.js，需要在程序运行前手动删除；
3. vue文件中script的词条替换不支持setup语法糖，需要手动处理； 在main.ts中引入i18n，在window上挂载全局方法(window as any).$t = I18n.global.t;然后整体替换this.$t为(window as any).$t;
4. vue文件html中的属性类标记可能需要手动处理，最常见的如tooltip的content，input的label等，例如：，需要替换为：;

ellipsis黑科技

本项目绑定了全局的ellipsis指令，用于处理文本过长时的省略显示，使用方法如下：