VUE外卖项目

问题记录：

1:

页面加载时，轮播图效果没有出现

解决方案：

1、添加延时，但此方案不够好

2、调用vue官方实例方法：vm.$nextTick([callback])，实现将回调函数延迟到下次DOM更新循环后执行，在修改数据后立即使用它

 

2:短信验证登录时，发送验证码

可以调用https://www.yuntongxun.com/ 云通讯的接口进行测试

 

 

3.模拟(mock)数据/接口：

前后端分离：

(1).后台向前台提供API接口，只负责数据的提供和计算，而完全不处理展现

(2).前台通过Http（Ajax）请求获取数据，在浏览器端动态构建界面显示数据

设计JSON数据结构：

 

4:路由组件懒加载：

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。在单页应用中，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

1、vue异步组件实现路由懒加载

　　component：resolve=>(['需要加载的路由的地址'，resolve])

2、es提出的import(推荐使用这种方式)

　　const HelloWorld = （）=>import('需要加载的模块地址')

 

 

1、未用懒加载，vue中路由代码如下

2、vue异步组件实现懒加载

方法如下：component：resolve=>(require(['需要加载的路由的地址'])，resolve)

3、ES 提出的import方法，（------最常用------）

方法如下：const HelloWorld = （）=>import('需要加载的模块地址')

（不加 { } ，表示直接return）

 

 

5：Vue项目实现图片懒加载：

使用Vue的vue-lazyload插件

npm install vue-lazyload