微信号:imooc-com

介绍:慕课网是一个超酷的互联网、IT技术免费学习平台,创新的网络一站式学习、实践体验;服务及时贴心,内容专业、有趣易学。专注服务互联网工程师快速成为技术高手!

关于高效前端开发·Vue.js,你想知道的他们都问了

2017-05-04 16:12 color


上一期的“高效前端开发·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保持两种环境的统一。



看完以上问答,是不是有很多编程问题要提问?

那下一期的花式填坑“Python”话题,千万别错过了!


我们邀请的下期填坑嘉宾是:bobby老师。查看个人主页,点击这里




点击下图,即可免费参与提问




 

戳戳戳,参与这一期的Python话题讨论!!!

 
慕课网 更多文章 有了这样的编程学习工具,再学不好,就是你不努力了! 慕课网紧急@所有人,你的第一张BAT入场券马上要过期了! 奥运来了,抢书啦,先到先得 2小时搞定移动直播App开发 开始学习 4 年前端狗,2 年 CTO,一个程序员六年的奋斗史
猜您喜欢 华尔街再吸机器学习大牛,Pedro Domingos加入对冲基金巨头DE Shaw Docker世界中的配置管理:5分钟让你明白如何在Puppet,Chef, Ansible之间选择 移动开发每周阅读清单:WWDC15中文字幕、Android N预览版 一起聊聊:是什么让你从 iOS 转向 Andriod ? 我曾得到的最佳编程建议