本项目开发时间比较赶,由于近段时间学校考试和参加本学院的一个智慧团建项目，最终导致本项目开发时间只有7天，在后面时间里会不断完善
- 🏷️ vue3+ts+vite+vant+axios-mapper(模型+防止二次请求)
carclub-front
├─ .env.development // 开发环境变量
├─ .env.production // 生产环境变量
├─ .prettierrc.json // 保存格式化代码格式
├─ postcss.config.js // postcss适配方案
├─ public // 公共入口文件
│ └─ favicon.ico
├─ README.md // md说明文档
├─ src
│ ├─ apis // api接口
│ ├─ car .ts
│ └─ users.ts
│ ├─ App.vue // vue入口
│ ├─ assets // 静态文件
│ ├─ components // 公共组件
│ │ ├─ CarRotates .vue // 车的评分组件
│ │ ├─ CarSeriesItem.vue // 车系项
│ │ ├─ Model.vue // 模态框（试驾，我的评分等）
│ │ ├─ MyNavBar.vue // 头部导航条
│ │ ├─ MyRate.vue // 我的评分
│ │ ├─ MyTabBar.vue // 底部tabbar
│ │ ├─ SelectQueryNav.vue // 选择查询按钮
│ │ └─ SeriesItem.vue // 车系项
│ ├─ config // 配置
│ │ ├─ custom // 可选配置
│ │ │ └─ index.ts
│ │ ├─ default // 默认配置
│ │ │ ├─ index.ts
│ │ │ ├─ net.config.ts
│ │ │ └─ setting.config.ts
│ │ └─ index.ts
│ ├─ constant // 固定不变
│ │ ├─ headers.ts
│ │ ├─ key.ts
│ │ ├─ network.ts
│ │ └─ settings.ts
│ ├─ env.d.ts // 打包或者生产环境变量描述
│ ├─ hooks // hooks
│ │ └─ getCityLocation.ts // 高德apihooks
│ ├─ layout // 布局
│ ├─ main.ts // 主程序入口
│ ├─ mock // mock数据
│ │ └─ vite-plugin-mock // vite mock插件（主要解决生产和开发环境mock数据使用）
│ │ ├─ _createProductionServer.ts
│ │ ├─ _util.ts
│ │ └─ user.ts
│ │ ├─ data // 传统mock数据
│ │ │ └─ userData.ts
│ │ ├─ db.js // json-serve模拟mock数据
│ │ ├─ db.json
│ │ └─ index.ts
│ ├─ models // 数据模型
│ │ ├─ brandModel.ts
│ │ ├─ carSeriesModel.ts
│ │ ├─ cityModel.ts
│ │ ├─ rootObject.ts
│ │ └─ userModel.ts
│ ├─ plugins // 插件
│ ├─ router // vue-router
│ │ └─ index.ts
│ ├─ shims-vue.d.ts
│ ├─ store // 状态管理
│ │ ├─ index.ts
│ │ └─ modules
│ │ ├─ car
│ │ └─ user
│ │ ├─ action.ts
│ │ ├─ enum_type.ts
│ │ ├─ getter.ts
│ │ ├─ index.ts
│ │ ├─ mutation.ts
│ │ └─ state.ts
│ ├─ tests // 测试
│ ├─ utils // 工具
│ │ ├─ ase.ts // ase加密算法实现本地存储数据加密
│ │ ├─ baseCar360Url.ts // 360度旋转上传路径封装
│ │ ├─ baseUrl.ts
│ │ ├─ enumType.ts
│ │ ├─ https.ts // 请求封装
│ │ ├─ localStorage.ts // localStorage存储
│ │ ├─ storage.ts // 本地session，local，cookie存储封装
│ │ └─ tool.ts // 一些本项目用到的常用工具
│ ├─ views // 视图
│ │ ├─ BrandCarSeries.vue // 品牌页
│ │ ├─ CarDetails.vue // 车系详情页
│ │ ├─ City.vue // 城市列表
│ │ ├─ Home.vue // 主页
│ │ ├─ Login.vue // 登录页
│ │ ├─ Mine.vue // 我的页面
│ │ ├─ MyDrive.vue // 我的试驾
│ │ └─ MyScore.vue // 我的评分
│ └─ vite-env.d.ts // vite-env描述文件，如 请求baseUrl等
├─ tsconfig.json // ts配置入口
├─ vite.config.ts // vite配置
└─ yarn.lock // yarnlock
项目难点
🏷️ 索引条的实现
- 🔖 描述：本项目在所有品牌展示和所有城市展示
- 🔖 思路：描点连接+window的scrollTo实现点击定位回到顶部
- 🔖 解决方案：使用vant的组件索引二次封装
🏷️ 车系360旋转
- 🔖 描述：车系页实现车型的手势360°旋转
- 🔖 思路 ：参考懂车帝和雷克萨斯的实现思路，以36张 图片加上手势滑动,加上opacity实现
- 🔖 解决方案 :使用开源 js-cloudimage-360-view实现
🏷️ 城市定位
- 🔖 描述：城市定位，在选择城市时，实现自动和手动刷新定位
- 🔖 思路：采用高德api，通过ip来获取城市位置
- 🔖 解决方案：采用高德 CitySearch接口实现
...
git commit -m "views: 添加xxx页面" // 新增页面
git commit -m "fix: 修复xxx Bug" // 修复一些问题
git commit -m "del: 删除部分...." // 删除部分内容
...
- 请按照规范格式提交，总的要求是提交前加上对应的
[xxx]标记。
参考Angular团队提交规范加上自己需求
| 标记名 | 操作名 |
|---|---|
| views | 页面 |
| component | 组件 |
| fix | 修复 |
| refactor | 重构 |
| docs | 文档 |
| style | 样式 |
| change | 修改 |
| update | 更新 |
| feat | 新功能（feature） |
| test | 增加测试 |
| chore | 构建过程或辅助工具的变动 |
| upgrade | 第三方库升级 |
| revert | 回滚 |
| del | 删除 |
**tips: 提交建议使用命令行进行提交
提交规范本项目没得采用husky、commitlint和lintstaged进行代码规范。
github：https://github.com/xiaolifeipiao/dcd-car-management
因为时间问题导致后台项目开发只是搭起项目框架，和一些静态页面 在后面我会 抽时间来完善
技术选型
- vite+ts+ant-design-vue+yarn+等 一个开源框架
- 🔖 项目技术选型上，我选用了最新的技术，在开发过程遇到一些问题导致开发进度受到影响，在以后的项目开发中，对于不是用来测试技术的项目，选择自己熟悉的版本，重要，重要，非常重要。在项目中虽然遇到一些瓶颈，但是我并没得放弃，而是慢慢把它细化，分而治之。在最终解决不了时，采用其他侧面的解决方案。
- 🔖 本次项目的格式化提交做的不好，只是采用eslint+prettier进行简单的本地格式化检查和提交规范，并未加入husky、commitlint和lintstaged约束提交。后期我会加上。
- 🔖 在mock数据的选择上，因为及时查阅vite的第三方插件mock可以使用开发和生成一起使用的mock数据。最终选择json-server+mock。导致接口部分没得完善。
- 🔖 在测试方面，因时间问题并没的加入测试，后期补上。
- 🔖 在该项目的开发中，了解了mock数据的选型，以及 vite的热更新真的快 ，加强在这方面 的学习，以及对vue3全家桶和ts有了一个全新的认识，vue3的父子组件的执行和异步组件加载，以及子组件的props的只能读不能修改，vue3a父子组件的通信方式和vue2的区别，以及在vue3+ts实现vuex的分模块开发的封装等等，我需要下来在加强vue3的一些特性的学习和原理实现。
- 🔖 最后感谢懂车帝平台给我门分享和交流前端和后端的学习，以及和我们交流一些技术和学习路线，收获颇多