上架过多个App,如沃易购、桂建通、桂薪宝、新薪通、人卫智慧商城【客户已下架】、找香料。
举个web项目案例:找香料web商城端
技术栈
- Vue.js: 用于构建用户界面的核心框架。
- Vuex: 管理应用所有组件的状态。
- Vue Router: 管理页面路由和导航。
- Axios: 用于处理HTTP请求。
- Element UI: 作为UI组件库。
- ECharts: 实现数据可视化。
- Sass: 扩展CSS,使共用样式的编写更加方便。
工具和环境
- Node.js & npm: 项目环境和依赖包管理。
- Webpack: 模块打包器,用于构建项目。
- Babel: 转换ES6代码兼容性。
- Git: 代码版本控制。
- Visual Studio Code: 编写代码和项目管理。
开发流程
1. **需求分析**: 与项目管理团队进行多次讨论,确立需求。
2. **原型设计**: 使用Axure工具制作交云原型。
3. **环境搭建**: 搭建前端开发环境并初始化项目。
4. **组件开发**: 按照功能模块划分开发Vue组件。
5. **状态管理**: 利用Vuex统一管理各组件状态。
6. **路由管理**: 配置Vue Router实现应用的页面跳转和数据传递。
7. **接口对接**: 协同后端开发人员对接RESTful API。
8. **测试**: 单元测试和集成测试确保代码质量。
9. **性能优化**: 代码压缩、按需加载、缓存策略等优化。
10. **部署**: 使用Docker容器化部署到服务器。
遇到的问题及解决方案
- **状态管理复杂**: 当应用规模增大,状态管理变得复杂。引入Vuex并严格遵守其规范,有效解决。
- **组件通信**: 多层级组件间通信困难。通过Vuex进行状态管理和事件总线(Event Bus)解决。
- **性能瓶颈**: 初期遇到首屏加载缓慢的问题。通过路由懒加载和Webpack分包优化应对。
- **浏览器兼容性**: 项目需兼容IE11,Babel转译ES6+语法,Polyfill补充缺失特性。