为了账号安全,请及时绑定邮箱和手机立即绑定

【花式填坑第1期】高效的前端开发 · Vue.js干货问题合辑


https://img1.sycdn.imooc.com//591177b30001e75305880273.jpg

第一期“高效前端开发·Vue.js”话题活动中,大家与嘉宾讲师都很热情地互动交流,产生出了对很多用户关心,想知道的前端vue干货问答。现在小慕筛选出几个优质的问与答,分享给在学习前端开发的小伙伴们。


Q:如何把vue融合进php或java 的项目里??对这个没什么概念

fishenal老师:简单地说就叫前后端分离, php或java 负责提供操作数据库,业务逻辑处理,前端用vuejs搭起来的网站负责展现数据和前台业务逻辑处理。

两者之间的数据交互就是你说的,用ajax,动态的交互。 以前是php或java拼好页面,现在是把动态数据做成api给前端来调用,前端更灵活,可以处理各种交互,可以做成单页面应用,这是一个,第二个上线和开发都可以做到前后端分离,前端的修改只改前端的网站代码,后端的修改只改后端的网站代码,可以分开上线,分开维护,不同的团队维护,做到解耦。

热心用户1:现在大部分的互联网公司都是采用前后端分离的做法,这样比较好维护、易管理;后端只管写好接口数据就行,不需要管前端如何实现,剩下的就交给前端去实现吧!

热心用户2:使用VUE搭建前段页面,PHP或其他语言完成后端的restful API,使带宽只跑数据,页面放到CDN中,这种结合还是非常好的。


Q:老师,vue的未来在哪里?目前大部分都是小公司在使用,是目前mv框架里面最容易上手的一个,因为容易上手才会成为最火的框架。vue和react、angular他们的未来如何?

fishenal老师:谁说只有小公司在用了,百度的部分团队在用,腾讯的一些团队也在用。未来不好说,前端框架这么多年来一直在进化,最早期的backbone已经没人在用了,只能说目前vue,react,angular各有吸引人的点,总的来看前端mvvm框架的设计模式基本固定了,这三个框架之间也有相互借鉴的东西,最终哪个会胜出,或者只留一个两个这都不好说


Q:请问大公司为什么不用VUE?

fishenal老师:这句话不准确,我在百度的时候几个团队都在用vue,而且是从react转过去的,还有腾讯上海的一些商务平台团队也在用vue。

 的确,一些老项目有历史的可能很难转vue,但它们也不会转react和angular,我感觉现在新项目基本都在这三个框架之间进行选择,vue的优势在于快速开发对于新人友好,大公司也没有在排斥它。而且说白了,bat一些内部团队技术选型的时候也没有那么谨慎,用着顺手就用了。

热心用户3:饿了么和微博移动端,小米移动端不都是用 vue吗


Q:老师你好,请问vue.js比传统的前端开发有哪些优势?

fishenal老师:现在的前端页面,以及移动端页面,趋势就是交互越来越复杂,一个功能页面承载的内容非常多,比如各种弹窗,浮层,各种页面组件,选择,控制,条件判断。

如果用传统jquery来开发,这个过程会变得非常复杂,哪怕你做好模块化,你也要频繁的于页面进行交互,页面的组件也没法得到很好的整理。vuejs这类的mv*框架,首先提出来的概念就是数据的双向绑定,js里的数据和页面的展现得到关联,我在修改数据或者处理页面用户输入的时候,不需要像jquery那样去处理绑定的过程,同时也划分了model(数据)层和view(展现)层,使得数据和展现得到解耦。 

第二个,模块化,组件的模块化。现在我们看到一个移动端页面,可能内部包含了十个二十个组件,弹窗,浮层,控件等等,每个都可以做独立的模块,用来实现复杂的交互,单页面应用,复杂的功能。用vuejs按照框架指定的模式,可以很方便地实现模块化,在vue里面,每个组件都是一份配置,这份配置就是一个js对象,以组件树的形式,最终汇聚到根组件里,这是一套很好的设计模式,很好的实践。同时,每个vue组件同时包含了html,css,和js,以前端的三要素组成一个完整的组件。

第三,vuejs有强大的扩展功能,比如vue-router - 实现单页面应用, vue-resource - 后端数据请求, vuex - 页面状态管理,基本现在前端能用到的技术,都可以在vue里面找到扩展,跟这样一些扩展功能组合起来,vuejs就是一个拥有无限可能的全面的前端框架,甚至到服务端渲染,都可以实现。


Q:请问老师,vue.js脚手架项目下下来我看比较复杂,能不能详细说一下呢?现在是二脸懵逼……

fishenal老师:vue-cli生成的项目,其实是跟你带的模版参数有关,最常用的就是webpack那套完整的模版,这套模版也可以在github上找到源码:https://github.com/vuejs-templates/webpack/tree/master/template 

这套模版的build目录,包含了构建相关的内容,dev-server是测试服务器,8080端口那个。webpack几个,webpack.base webpack.dev 等,都是基于webpack.base拼成的webpack打包配置。 

build里引用了config目录下的配置,配置也是区分了dev和 prod模式。基本这里所有的,dev模式管的是npm run dev跑出来的东西, prod模式跑的都是npm run build跑出来的东西。 项目外层的package.json 是npm用于打包的配置,index.html是项目的起点,index.html会被原封不动的放到最终目录里,你的项目其实都是这里引用的main.js。 项目的主体,就是src目录,源码目录。src目录下main.js是打包js的起点,在这里引用了根组件,比如App.vue,App.vue在逐层往下引用components里面的组件。 如果需要区分页面也可以把页面放到pages目录下。 src/assets通常是放一些小图片用的。


Q:老师,问您一下,我在Vue中还可以使用jQuery吗?是不是之前我用的一些前端的轮播插件基本上都没用了呢?还有一个问题,就是动态组件和路由使用场景有什么区别?

fishenal老师:vue可以替代大多数jquery的功能,插件vue也都有自己的,原来jquery的不能直接用。动态组建,可以把组件独立出来,不用放到一个文件里,太大。路由是用于单文件应用,spa的


Q:考虑到页面首次加载闪速白屏和SEO问题,把页面放服务端预渲染,这部分工作是否要前端完成?

fishenal老师:有必要,vue也提供方法解决了这个问题: 服务端渲染 https://cn.vuejs.org/v2/guide/ssr.html 搭一层node 服务,在页面渲染之前拼出来一个首页,就类似用node做以前php smarty模板的工作,vue这套方法的好处是,模板就用一套,同一个vue组件,可以直接用来服务端渲染,也可以直接拿来前端渲染


Q:vue.js项目开发完成以后怎么测试和发布?

fishenal老师:脚手架项目里,npm run dev是启动测试服,npm run build是将项目打包到dist目录,上线的话要将dist目录拷到线上服务器,vue项目只能通过http server来访问。开发的是一份代码,即src里的源代码,rundev和build保持两种环境的统一。


---------------------------------------------------------------------

讲师介绍:fishenal老师,五年以上前端开发经验,就职于国内一线互联网公司,艺术设计硕士。

多年积累的前端开发经验,让他对前端有了不同一般的理解和思考。此前,已在慕课网推出了《Vue.js入门基础》课程,有近6万人因他的课程快速入门了Vue.js。讲师个人主页,点击查看



点击查看更多内容
26人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
全栈工程师
手记
粉丝
1000万
获赞与收藏
5105

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消