一、总览整个项目,确定技术栈,即要用哪些技术来共同完成该项目。
vue-cli3/4 + vue-router + axios + vant + rem
二、在确定技术栈之后,开始项目搭建
在这里我是通过UI可视化界面快速搭建的项目
三、搭建好项目之后,进行一些相关配置
- 多环境变量配置(开发、测试、生产)
- axios 请求拦截,响应拦截 (API统一管理)
- rem移动端适配方案我用的是px-to-rem插件
- vant-ui 按需导入
- 本地跨域
四、进行路由配置
在该项目中,没有涉及到路由嵌套及路由守卫等相关问题,只是简单的配置一下路由即可。
在跳转到详情页时涉及到路由传参,我用的是parmas传参,将旅游景点的信息作为对象传递到详情页,渲染即可。
五、组件化开发
在首页组件中,运用组件化开发的思想,我将首页分为头部、轮播图、中部列表、底部列表四个组件部分,这样后期便于维护。
六、请求数据
由于该项目并没有涉及到跨域问题,所以只需用axios请求本地assets中的数据即可。