最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的公司项目。
Submitted by admin on 2018, October 31, 11:02 AM
最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己的公司项目。
Submitted by admin on 2018, October 31, 10:06 AM
在做东钿贷后系统的时候,我选择了vue-resource这个插件作为与服务器沟通工具,但是听说前端同行说vuejs2.0已经不在维护vue-resource了,vuejs2.0 已经使用了axios了。因为我刚好用的vux这个ui组件。而且vux的ajaxplugin的插件使用的就是axios。不用觉得特别浪费axios,而且以后肯定也是要用axios的。于是我就决定把现用的vue-resource换成vux自带的ajaxplugin。
vux官方文档也说了很清楚并且使用起来很简单,已经整合和vue-resource的写法一样 如下图
直接在main.js做如下修改
然后出现了json数据不接受的问题,于是我就去问人,看看别人是怎么解决的。
有个前端的朋友叫我使用箭头函数,我一开始不太明白怎么改,后来才知道他说的箭头函数就是vue http的另外一种写法,就是把传统写法改成lambda的写法 如下图,对比一下下图红色标注。就知道了。照着这样改,我把所有的都改成这样,确实有效,好使
接下来就是axios的拦截器问题,一直报连接失败,然后也确实没有ajax成功。没ajax成功就别说拦截了,于是又去问人了,一开始就有人说是this指向问题,因为axios并不是Vuejs的插件,而是第三方ajax插件,其实也不算是axios的拦截器问题,确确的说应该还是 自己vuejs的功底不扎实。最后就是this指向不对。代码如下
后面还是问了那位朋友,说把this改成Vue试试,果然好使,如下图:
问题饶了一大圈 很多时候就是方向不对,一直转转转啊,百度还说了要用axios的原始用法。于是我研究了一下,还是有问题。其实根源没解决怎么换都是错的,没有直中要害处。最近发现现在要不就没有问题,要不就是一个问题要半天甚至要一天。但总归还好,算是解决了,应该也会有点收获,唯一要记住的就是以后解决问题一定要直中关键点。要不然 方向越走越远,问题还没解决。一定要好好学习,扎实功底。
Submitted by admin on 2017, December 15, 11:42 AM
hardcode 一些基础样式在主文档里面。 比如loading动画或者基础背景色。
在bundle.js请求没有回来之前,有较好的等待效果,而这段样式无需异步加载。
加载慢原因:
1、bundle太大,没有压缩混淆。
2、bundle没有使用异步模块加载。
3、bundle没有拆分css样式或者base64了图片。
以上都可以对症下药
(1)给个loading菊花挡一下
(2)考虑对于页面的组件做异步加载
(4)webpack打包优化,减小打包文件体积大小
(3)vuejs路由的懒加载策略
(5)配置vue-cli,利用webpack插件完成模板预加载
(6)考虑服务器渲染首屏骨架页面,或者更复杂的服务器渲染策略ssr,官方有文档
Submitted by admin on 2017, December 9, 10:14 AM
https://www.vue-js.com/topic/59ba3338f3dc95c4771d5cfc
Submitted by admin on 2017, December 9, 10:00 AM
懒加载:----------------------------------------------------?
也叫延迟加载,即在需要的时候进行加载,随用随载。
为什么需要懒加载?
像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时
简单的说就是:进入首页不用一次加载过多资源造成用时过长!!!
如何实现?
懒加载写法:
非懒加载的路由配置:
还有一点:是我遇到的如果你遇到了就看下——就是用了懒加载后打完包直接运行那个index.html会报错,报文件引用错误其实是打包时候路径配置有点问题修改下就好了
如下图:
找到build下面的webpack.prod.conf.js 添加 publicPath:"./",
https://www.cnblogs.com/lijuntao/p/7777581.html