公司内部技术分享之Vue.js和前端工程化
今天主要的核心话题是Vue.js和前端工程化。我将结合我这两年多的工做学习经从来谈谈这个，主要侧重点是前端工程化，Vue.js侧重点相对前端工程化，比重不是特别大。css
Vue.js
Vue.js和React.js、Angular.js并驾齐驱号称前端三大框架(前端最经常使用的这三大框架，大中小公司均采用)。
Vue.js是一个叫尤雨溪及其余的团队开发的，不过早年是他本身独立作出来的。这一点我以为他很牛逼。
我以为每一个作开发的朋友们，都要有一个本身的开源项目，本身的开源项目能够是本身工做三到四年发现有不少地方是重复的，能够写一个框架减小没必要要的重复工做量，如今已经有不少人正在作，好比renren-security、jeesite等开源项目，经过它们很容易就能够写出一个功能齐全的后台管理系统。也能够是本身开发中经常使用的某些组件，那些组件每次开发都要用，能够将其收集起来，针对其中某个api进行改造，好比Hutools这个开源项目在这个方面就作的挺不错。又或者是在校的学生们，本身能够不断实践，写写图书管理系统或者是根据学校某些需求定制一个系统出来，而后将其开源，我以为这样一来，对于之后毕业出来找工做也是颇有帮助的。总而言之，开源项目能够是不少，它能够是一个电商系统、CMS、CRM或ERP之类的，也能够是读书笔记、书籍收集、文章收集等。html
关于Vue.js这部分，主要参考Vue.js的官方网站和一些开源项目前端
下面正式开讲vue
工具
Devtools
Devtools其目的主要是用于浏览器调试Vue相关的项目(由于Vue.js中的标签并不只仅是html相关的，还有如el这类的标签及其相关的dom关系等，这些都是常规的浏览器调试所不能作到的)java
vue-devtools开源项目地址
图文详解vue.js devtools使用方法
使用Devtools调试对应的Vue.js应用程序，效果如图:node
Vue CLI
1.Vue CLI具备以下优势
(1)功能丰富
对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。webpack
(2)易于扩展
它的插件系统可让社区根据常见需求构建和共享可复用的解决方案。git
(3)无需 Eject
Vue CLI 彻底是可配置的，无需 eject。这样你的项目就能够长期保持更新了。github
(4)CLI 之上的图形化界面
经过配套的图形化界面建立、开发和管理你的项目。web
(5)即刻建立原型
用单个 Vue 文件即刻实践新的灵感。
(6)面向将来
为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。
2.Vue CLI的三种构建方式
第一种方式(常规)
npm install -g @vue/cli vue create hello-world npm run server
第二种方式(旧版本2.x)
npm install -g @vue/cli-init
vue init webpack my-project
第三种方式(GUI)
在git bash中输入以下命令，便可建立vue脚手架项目:
vue ui
效果图以下:
Vue Loader
Vue Loader的做用是解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。
Vue Loader官方指南
Vue Loader的例子不少，如图所示:
从图中咱们就能够看出它们的职责和做用，正好验证前面说的script（逻辑代码)、style(样式代码)、template(html模板)。
换句话说，Vue Loader你能够理解为一个tomcat服务器，它不只仅能解析jsp和servlet，还能处理css、html、js等前端三剑客。
核心插件
Vue Router
Vue Router文档
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
包含的功能以下:
(1)嵌套的路由/视图表
(2)模块化的、基于组件的路由配置
(3)路由参数、查询、通配符
(4)基于 Vue.js 过渡系统的视图过渡效果
(5)细粒度的导航控制
(6)带有自动激活的 CSS class 的连接
(7)HTML5 历史模式或 hash 模式，在 IE9 中自动降级
(8)自定义的滚动条行为
Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vue服务端渲染
Vue.js 是构建客户端应用程序的框架。默认状况下，能够在浏览器中输出 Vue 组件，进行生成 DOM 和操做 DOM。然而，也能够将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记”激活”为客户端上彻底可交互的应用程序。服务器渲染的 Vue.js 应用程序也能够被认为是”同构”或”通用”，由于应用程序的大部分代码均可以在服务器和客户端上运行。
这个服务端渲染一般能够用node.js中的express框架，固然了，也能够用koa或者egg.js等。
资源列表
关于Vue.js学习方式，我的建议对HTML+CSS+JavaScript要掌握的比较好才行，不只仅对前端而言，后端也亦如此。
为何这么说呢？
一般来讲作Java后台开发的，基本上前端也会。
另外从一位前端工程师的角度来看，前端的技术与后端相比，更新迭代更快，可是不变的仍是前端三剑客那点东西。把握了这些基本上学任何前端框架都是一件很容易的事情。
正如Vue.js起步中所说的那样:
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。若是你刚开始学习前端开发，将框架做为你的第一步可能不是最好的主意——掌握好基础知识再来吧！以前有其它框架的使用经验会有帮助，但这不是必需的。
另外我一直认为，公司研发岗位，如开发人员、测试人员、运维人员、运营人员、产品人员等，至少要知道彼此在作什么以及彼此工做之间联系，我以为这样会比较好，否则很容易会陷入一个死循环，你能够理解为”闭关锁国”。
本次的Vue.js内部分享不算太多，只不过是全局概况一下，更多的内容，能够去官方网站上学习。
我以为做为一名研发人员，必定要养成经过官网学习的习惯，像博客之类的能够做为一个辅助或者深刻的学习方式。经过官方网站学习，我以为整体可让你造成一个全局的认识，这种认识，可让你举一反三或触类旁通。
举个例子说一下，最近由于某个电商项目二次开发，而该二次开发用的是ThinkPHP框架，虽然我没有接触过PHP方面的，可是我经过官网相关知识，一下就了解了它的大体，ThinkPHP是基于MVC的，而正好能够联系到Java中的SSM,其也是基于MVC。
前端工程化
这一部份内容我将结合个人开发经历和《前端工程化体系设计与实践》这本书。
先后端分离
原始的先后端分离方式
前端把页面模板写好，后台将页面模板改成jsp或者freemaker、volocity等动态模板语言。
曾经作的一个智能酒店项目就是使用这种方式。这样作最很差的地方是，若是公司是先后端职责分明的话，前端每改动某个页面时，都须要将修改的后发给后台人员，后台人员将其改成jsp。这样一来效率及其低下，固然了，小公司是不会这么作的，小公司都是后台兼任前端的，天然就能够省去这些没必要要的时间成本。
原始的先后端分离方式优缺点(以模板语言采用jsp为例):
优势:
(1)严格按照MVC模式，职责分明，效率仍是挺高的，举个例子说明，视图(jsp)只负责展现数据而不作过多的逻辑判断处理，过多的逻辑判断应该交给控制器内部的业务逻辑方法进行处理。
(2)因为一般采用的是模板语言(jsp、freemaker、volocity等)，视图里能够作必定的逻辑判断和处理，所以没必要嵌入大量的js，大量的js若是某一个有问题，将会致使整个有问题，好比写一个ajax方法，可是参数没有传进去，这时页面上将不会显示数据，只会空白，只能用浏览器调试才能发现是哪里有问题，若是是jsp的话，直接就会报500错误(或者内部作一些处理，让其跳转到错误指定界面);
(3)减小HTTP请求(只需请求一次便可,若是页面是html的话，须要大量的js函数请求后端路由，在必定程度上会增大服务器的压力，致使页面延迟);
(4)不用考虑浏览器兼容性(有些js的方式因为浏览器的兼容性而不能正常调用或者须要进行改动);
缺点:
(1)复用性较差(因为返回的不是json数据而是视图，致使复用性不是特别好);
(2)过于依赖Java运行环境(须要servlet容器);
(3)先后端未分离，耦合性高，可读性差(jsp中嵌入java代码及其大量的jstl标签，致使可读性很差，耦合性也高，固然了，若是作一个良好的设计并遵循的话，耦合性是能够下降的，可读性也是能够提升的);
总的来讲，用jsp做为视图展现，可复用性不是特别好，因而曾经的第二个项目LMS(智能门锁系统)，视图就变成了HTML，由Ajax做为先后端交互的支点。
用Ajax的优缺点以下:
优势:
(1)开发过程先后端脱离，经过接口进行JSON数据传输(职责分明更加明确);
(2)跨平台能力更强，依托于浏览器的支持(基本上人们经常使用的浏览器(谷歌、火狐、IE、360等)都支持)
(3)可复用性更好;
缺点:
(1)开发难度大，考虑浏览器兼容性;
(2)页面请求过多(参考网站十大优化原则，其中一点优化原则是减小HTTP请求，过多的HTTP请求对于性能是十分消耗的);
(3)接口代码须要新增不少(这一点我相信许多开发人员都有这样的感触);
(4)大量的逻辑判断都须要使用js(前面我说过,js是不容许一丁点错误的，一旦错误，体验很很差，至少jsp报错500，可让其跳转到一个友好的提示，而html就不行了，直接就没有数据或者是若是牵扯到布局，直接会影响到用户体验);
总的来讲，开发中通常二者兼用。
不事后来，Vue.js、Angular.js、React.js火起来了，先后端分离实践更佳的方式到来。
由于即使彻底采用jsp做为视图展现/采用HTML做为视图展现或者二者兼用，仍是存在很多的问题的。这一点后面会讲到的。
前端工程化
前端工程化的目的在于提升生产效率
前端工程化的衡量准则
三大衡量准则:
(1)从开发的角度衡量工程化，主要体现为”快”;
天下武功，惟“快”不破。作项目也是如此，特别是作产品原型，必定要快，快速作出来，而后使用mock套一些假数据，等待产品经理确认是其想要的，而后就能够开发的。从中也体现着“敏捷”。
(2)从测试的角度衡量工程化，主要体现为”快”和”准”;
“快”的主要体如今前端工程师和后端工程师并行完成以后的集成测试阶段。
“准”的主要体如今集成测试阶段对问题的准肯定位。
什么是集成测试?
集成测试，也叫组装测试或联合测试。在单元测试的基础上，将全部模块按照设计要求（如根据结构图）组装成为子系统或系统，进行集成测试。
你能够将其理解为一辆车，车在没有组装成是一堆大大小小的零件，这些零件通过生产工人生产，组装工人组装，质量工人测试。零零散散的零件单个测试也许是没有问题的，可是组装成一辆车的时候，这个时候就可能会出现问题。
(3)从部署角度衡量工程化，主要体现为”稳”;
一般会使用持续集成工具(如Jenkins、 Travis CI等)，一般会将每一次开发人员的代码提交进行编译、测试、发布，若是编译或测试有问题，直接就会将本次构建取消，回滚到稳定版本。这样一来，能够确保”稳”。
前端工程化的进化历程
前端工程化的3个阶段
(1)本地工具链-工程化不等同于工具化;
工程化的核心并不是工具。前端工程化是以规范工做流程为手段，以工具为实现媒介，其最终目的是为了提升研发效率以及保证Web产品的线上质量。
若是要给前端工程化一个明肯定义的话，比较恰当的定义以下:
前端工程化是一系列工具和规范的组合，规范为蓝本，工具为实现。其中规范以下:
a.项目文件的组织结构，好比使用目录名称区分源文件和目标文件;
b.源代码的开发范式，好比使用既定的模块化方案;
c.工具的使用规范，好比工程化自身的配置规范;
d.各阶段环境的依赖，好比部署功能的实现须要目标服务器提供SSH全新;
另外工具链的统一，另外一个好处是巩固了流程的规范性，开发者使用统一的工具链、遵循统一的规范进行业务代码的编写，利于多人协做和程序维护。
试想一下:
假设你身处一个团队，团队中没有任何的开发规范，遇到一些需求，每每这些需求是能够经过引入某一个框架来实现的，但因为没有任何的限制，原本一个框架能够实现多个需求，但像前面提到的没有任何规范限制，就变成了多个框架实现多个需求。这样一来项目将会愈来愈乱，不利于团队协做。我曾经就作过这样的项目，深有感触。
(2)管理平台-进一步淡化差别、加深规范;
管理平台形态的工程化需达到以下几点:
a.淡化环境差别性，保证构建产出一致性;
b.权限集中管理，提升安全性;
c.项目版本集中管理，便于危机处理，好比版本回滚等;
管理平台形态将各个功能模块的执行环境集中化，从各模块实现角度来说与本地工具链基本一致。
(3)持续集成-前端工程化的目标是融入总体
即便进化达到管理平台形态，前端工程化方案所能解决问题的本质仍然只是将前端工程师与后端工程师的工做解耦。虽然提升了两端的工做效率，可是各自的工做流倒是孤立的。前端有了构建和部署，后端也有了相应的阶段，两方的工做流是分离的，最终的融合工做仍然难以免繁琐的人工操做。
举个例子，好比后端修改了某个接口，前端某个dom与这个接口关系紧密，接口变化了，dom渲染也要随之变化，可是因为工做流是分开的，前端工程师并不知道这一点。咱们常常强调一点，要增强沟通，可是当项目紧急期到来时，每一个人手里任务一大堆，这时沟通就可能会少了不少，这时像上面说的，接口发生变化时，前端工程师并不知情，直到由于某些操做发生问题时，才知道原来是接口变了。另外从某个角度来看，接口的设计原则应该是与前端相隔离的，可是实际中并不是如此。
总结
今天主要分享的两个知识点，一个是vue.js，另外一个是关于前端工程化。
vue.js相关的demo，我已经放到个人GitHub上，感兴趣的朋友能够将其git clone下来，
地址为:https://github.com/developers-youcong/blog-manage-system
前端工程化，用一句话来归纳就是让工具更好的服务于流程。从研发的角度看，使用技术实现业务(让技术更好的服务于业务)。今天说的这个工程化核心就是工具与流程相结合起来，让整个工做流紧密结合且效率提升。鉴于本次内部分享说的挺多的，目前这只是一部分。欢迎你们评论留言，最好仍是提问题，问题让思考更深入。