关于vue外卖项目的一些总结

关于vue外卖项目的一些总结
1、搭建项目的结构
api:存放ajax模块获取数据
common:存放一些静态文件，样式
Components:存放普通组件
Filters:存放一些过滤模块，比如日期过滤
Mock：存放mock数据和配置文件
Pages：存放一些路由组件
Router：配置路由的index.js
Store：vuex状态管理文件，存放着 state、action、getters、mutation、 mutation-type、index等js文件

2、项目进展的流程
1、观察静态页面，合理拆分出一级路由组件和二级路由组件。
2、拆分路由后，创建相应的路由页面模块，通过vue-router配置路由，在main.js里应用路由
3、拆分普通组件，1是组件存在共用的情况，2是组件比较繁琐，这两种情况最好进行拆分。步骤：在需要该组件的页面引入组件，并映射成标签使用
4、静态页面拆分完毕后，将进行通信，使数据动态呈现
①从后台给出的api接口获取数据，使用axios发送ajax请求，在api文件夹里创建ajax.js 封装获取数据的方法，向外暴露，在创建index.js，创建对应的方法，获取相应的数据，使用vuex管理数据，判断什么时候需要获取数据，通过this.$store.dispatch()来向action发送请求，获取数据使用…mapState([])
②再后台没有给出接口时，我们需要自己mock数据，学会根据页面显示内容设计模拟数据，利用 mockjs 提供模拟数据
③设计页面逻辑，这个比较考验经验和头脑，数据的显示、计算
④引用相关库达到想要的效果，要学会看官方文档的介绍使用，学会举一反三

总结：这些都只是一些粗略的体会，绝知此事要躬行！