Vue(Webpack+Gulp+Sass+Jade)开发流程

Vue

前奏

您得确保安装了 gulp；
处于打包需要，您得一款终端软件，推荐Cmder；

环境

终端切换到：cdn/ns/目录下，运行 npm install命令安装插件。
package.json: webpack+gulp 插件配置；
jadeConfig.json: 指定运行项目**&**sftp密码配置；

开发

以Sublime来开发，可安装以下插件为Sublime；当然也可以是别的。
Syntax Highlighting for Sass
vue-syntax-hightlight

以下说法以 majmod 项目来说明：
项目文件夹说明（手累，不写了，参见 web\cdn\ns\majmod\_ActTemplateConfig）：
建立新项目：你可以自己按照这个构造进行创建；也可以双击运行 jadeCreateObj.bat，输入你想创建的项目名字即可。

开发项目：
在你创建的项目下运行Cmder（cd 切换到这里），运行webpack -w;开始编写代码；

上传代码到内网，你如果愿意可以使用jeff提供的gulp-sftp;在web/ns/目录下运行gulp即可，记得修改jadeConfig.json里面配置：你懂得。

组件别名引用： 为方便开发，有创建alias.config.js与majmod/actpublic；诸位可自行配置；如此只为方便开发，注意路径；alias.config.js配置示例如下：

module.exports = function() {
    return {
        ActTools : './../../actpublic/actTools.js',
        popupToastComp: './../../../modules/components/widgets/popupToast.vue'
    }
}

app.vue中引用示例如下(具体可参见：ns\majmod\majhappykwx)：

import ActTools from  "ActTools";
import NormalDlg from './../components/normalDlg.vue';
import popupToast from 'popupToastComp';

运营平台填写活动模板：替换原来的xxx_newtpl 为 xxx_vuetpl。

发布代码发布时，记得运行下webpack -p压缩下代码；否则Vue生成的文件会非常大。

约定

强烈推荐： 写好每一行代码，该留的空白，该有设计模式，都让其有吧；
力荐辅助工具： 力荐使用ES6 + scss + jade进行开发。

因为要过度到组件化了，你写的组件，别人也会用。你写的代码，别人也会去读了。设计的优美与否，经验问题；变量命名问题，坑爹问题。强烈建议，从此起，从局部变量，方法体，文本提示，文件名，组件名，以及CSS类名，统一规范起来。这真是为我们大家开发考虑；况且，命名这里不搞好，引入非自己组件时，很有命名冲突的可能。

温馨提示：

开发机制这里还在完善，大家可以的一起看下，商讨下，毕竟这有些玩意儿，一旦定下来了，就不好更改了。为了你的开发体验，Come On。

last modify：03-25
last modify：03-29

新(Vue)老(Backbone+Requirejs)活动性能对比：

写在浅析之前

Backbone作为老辈 Mv* 设计框架(只有在路由处稍体现了其Controller特性)，辅助以RequireJS也才做到模块化组合。

而Vue是基于MVVM设计框架，本质是通过数据绑定链接View和Model，让数据的变化自动映射为视图的更新。这造就界面完全可以用嵌套的组件树来描述，这使得应用的开发效率和可维护性都大大提升，同时写出的组件可以在各个不同应用平台活动复用，So Nice！

同时新活动机制（Vue）辅助利用，Vue-loader，File-Loader等插件，以及Webpack，Gulp等打包工具；以及支持使用 jade来书写 html模板；以及可自行使用 Scss，Stylus，Less等 CSS 预处理器框架；同时支持es6等等，在开发效率以及前端规范上，增进不少，具体细节再此不提，有兴趣的可参见Vue活动机制设计（Svn Down下查看即可）。

在此只针对两者性能作出浅析；因对两者学习还需很大程度的深入，难免有所谬误，欢请斧正。

理论基础

Web前端性能

即是web用户在访问一个页面时所要花费的时间总和。即一个完全意义上的用户响应时间，相对于服务器的响应时间而言还会包括更多的内容和影响因素。那么一个web页面的完整请求包括了哪些部分的时间总和就是web前段性能分析和优化所需要了解的基础知识；分析之前得先了解一下用户从浏览器访问一个url后，到页面完全展示所有内容的整个过程。

页面的请求过程：

1、浏览器的url请求
2、递归寻找DNS服务器
3、连接目标IP并建立TCP连接
4、向目标服务器发送http请求
5、web服务器接收请求后处理
6、web服务器返回相应的结果【无效、重定向、正确页面等】
7、浏览器接收返回的http内容
======================前端解析分割线========================
8、开始解析html文件，当然是自上而下，先是头部，后是body
9、当解析到头部css外部链接时，同步去下载，如果遇到外部js链接也是下载【不过js链接不建议放在头部，因为耽误页面第一展现时间】
10、接着解析body部分，边解析边开始生成对应的DOM树，同时等待css文件下载
11、一旦css文件下载完毕，那么就同步去用已经生成的DOM节点+CSS去生成渲染树
12、渲染树一旦有结构模型了，接着就会同步去计算渲染树节点的布局位置
13、一旦计算出来渲染的坐标后，又同步去开始渲染
14、10-13步进行过程中如果遇到图片则跳过去渲染下面内容，等待图片下载成功后会返回来在渲染原来图片的位置
15、同14步，如果渲染过程中出现js代码调整DOM树机构的情况，也会再次重新来过，从修改DOM那步开始
16、最终所有节点和资源都会渲染完成
=====================分析结束分割线=========================
17、渲染完成后开始page的onload事件
18、整个页面load完成

整个过程中会有很多的分别请求，所以TCP连接会很多，并且每一个用完都会自己关了，除非是keep-live类型的可以请求多次才关闭。微注：以上内容来源于 web前端性能分析--原理篇。

总以上所述，从Backbone框架转移至 Vue新型框架，对于二者性能的对比分析，将从以下几点开始入手浅析：数据加载方面，页面前端解析/更新方面，其他(动画，请求等)方面。

数据加载方面：

Backbone系：需要引入 backbone.js underscore.js require.js（两次）等诸多第三方插件(app.js达到160kb；Chrome Console 请求的Size和Content，分别是60.4kb和160kb；耗时60ms+)；加之对应活动合并起来的 main.js，以及css等。

Vue系：本身由于轻量（22kb min+gzip），即便用了诸多第三方类库(多是解析而已)，打包出的 main.js 经过压缩混淆(webpack -p)，根据活动复杂程度不同，在100kb左右（上下幅度40kb），当然这是有很大优化空间的。

如今在线跑的 vue系活动机制，因为完全前端兼容，故此 app.js 也是有载入的；目前来看Vue系活动机制，载入的数据量多过Backbone系的。

但，正在预研的新vue机制(从后端开始变更，到引入的xx.tpl.php开始，都采用 Vue 来写)，这样数据量上，Vue将是占据优势的(并且采用vue机制，会将各种资源打包，请求数目上是更据优势的，这一点对于网页性能提升蛮多，要知道请求过程三次握手的时间比少量数据传输多多了)；况且，相比原有机制，vue机制可减少冗余设计，可将各功能/布局/资源等等，拆分编写/设计，按需引用（也方便复用），这样在数据加载，代码维护方便都将具有颇大优点!good）。

纵以上所述，在框架完全迁移至 Vue 之后，无论是在还是数据请求总量，还是数据请求数量方面，vue都更具有优势。并且，Vue 强调数据驱动视图更新，加上js语言等本身的完善，之后我等开发活动即可不那么依赖于 jQuery，如此不仅在运行效率上大增(要知道现在使用 jQuery，因为其方便性，也间接造就了其低效性；eg: $('.what>ul>li p'))类似的代码活动中并不少见不是？），而且在数据加载方面，我们完全可以摒弃掉这部分数据，!nice）。

页面前端解析/更新方面

我们已经知道，Vue 核心在于组件化：用作者的想法即：户界面完全可以用嵌套的组件树来描述。这无疑是大大提升了开发效率（当然在代码的可维护性，复用性等方面也是大有裨益）。而在页面的运行(解析)效率方面，vue也是占有很大的优势的。

页面运行效率，这里主要以数据变更检测方式，创建和修改DOM等主要方便来看。Vue.js采用的则是基于依赖收集的观测机制。从原理上来说，和老牌MVVM框架Knockout是一样的。其基本原理如下：

• 将原生的数据改造成 “可观察对象”。一个可观察对象可以被取值，也可以被赋值。
• 在watcher的求值过程中，每一个被取值的可观察对象都会将当前的watcher注册为自己的一个订阅者，并成为当前watcher的一个依赖。
• 当一个被依赖的可观察对象被赋值时，它会通知所有订阅自己的watcher重新求值，并触发相应的更新。
• 依赖收集的优点在于可以精确、主动地追踪数据的变化，不存在上述提到的脏检查的两个问题。但传统的依赖收集实现，比如Knockout，通常需要包裹原生数据来制造可观察对象，在取值和赋值时需要采用函数调用的形式，在进行数据操作时写法繁琐，不够直观；同时，对复杂嵌套结构的对象支持也不理想。

数据变更检测方式： Vue大胜。要知道，Backbone.js 属于老一代框架，,第一次向浏览器引入了真实的数据模型，代替那些只在DOM上修饰的轻量级脚本。这也意味着，你第一次在浏览器上可以改变状态。数据模型的内容改变了，然后你把这些改变反应到用户界面上。尽管这些框架都在架构上从模型中分离出了UI代码，可同步两者还是要靠你自己来完成。当变动发生时， 你可以得到一套事件，但是应该由你指出那一部分需要重新渲染，和具体怎么渲染。（参见：JavaScript框架中的变动和变动检测）。

在我们写 Backbone框架活动时，细心你会发现，数据变更，基本都是有人为代码来驱动的。即便用了如下一般的代码：

this.listenTo(this.model, "change", this.render);

这无疑是一大缺憾：要知道这无非是针对 model数据做了类似观察者模式的监听，从而对于model中任何数据的变更都会重新 render，“饿滴神呀”，这个跟我们数据请求完毕手动调用 render 来重新渲染界面一样；抛开重新render的代价是否很大，但毕竟这是不值当的(尤其是现在活动开始所有视图是公用一个model的)。

创建和修改DOM： 对于创建Dom，无法给出理论数据说，Vue比于Backbone一定要快多少；但是大家可以参见 Vue 2.0 发布啦！，你就会知道，Vue已经发布2.0版本，而这2.0版本不仅更轻，更快，而且支持Virtual-DOM，这将会导致以后使用的vue将具有更好的性能呈现，欢呼吧Boys&Grils。在修改DOM方面，Vue高举优势大旗：前文已说明 Vue 基于依赖收集来检测数据更新，然后对应更新Dom，并且还具有以下优点!Great）：

异步批量DOM更新：当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。这个队列会在进程的下一个 “tick” 异步执行。这个机制可以避免同一个数据多次变动产生的多余DOM操作，也可以保证所有的DOM写操作在一起执行，避免DOM读写切换可能导致的layout。

相比于之前 Backbone，我们再也不用在重新请求 data_interface 之后，手动调用 render来更新视图啦。由此可见：在此方面的Vs中 Vue大胜。

并且，在如今Vue预演的新机制中，采用 vue-route 来切换各活动；有意将其设计成这样：在第一切入A活动时，将其资源载入，切出不予销毁；第二次切入如存在，就是一个 display 从none到block的状态，可想而知，这相比于之前Backbone机制，优势是多么的明显!excellent（前提是验证如此不存在任何问题，理论上可行）。

其他(动画，请求等)方面（都是优势）

• 数据请求方面：前文已提及，我们有可以摒弃Jquery的理论基础，那么以ajax请求数据方式当然也有可以替代的方案：vue-http 或者 fetch。这些替代的方案优势，鉴于时间和篇幅就不予以赘述，感兴趣的可自行查究探测。
• 动画制作/性能： Vue相比于传统的Web Components ，Vue带有数据绑定、动画系统等上层功能。这个点相当的好，不是么？Vue提供了CSS-过渡，这不仅会提升我们的开发效率，更有运行效率的提升，赞一个。
• 其他插件的引用： 在活动开发中我们难免要用些别人造的轮子，譬如跑马灯，下雪等，先前都是以 script 标签来外部引用(多加一个请求)，如今可以CSS-过渡import/require进来，之后统一都会打包至 main.js;更何况，我们完全可以将这些插件，改造成组件予以公用不是？
• 弹框等显现速度： 用过vue弹框等组件的盆友们，你会发现，vue弹框呈现的速度明显是快Backbone很多的(即便是用的条件渲染 v-if【v-show会更快，它的元素会始终渲染并保持在 DOM 中】)；至于这里缘由，同上不述，自行探究。
• 打包一切你想要的： 因为使用的 webpack，你可以将任何资源进行打包并require以引用之。对于占比空间很大的图片，更是可以指定范围转化成base64字符，可否想象到这样的优势类？

• 其他诸多方便： 要知道，新Vue机制，大力提倡使用es6，那么 CommonJs，AMD之流还需要坚守么，你觉得？大力提倡使用jade，这个会让你的dom清晰而明确，像Python一样优雅，想写乱都没可能，报错。大力提倡使用scss，使得写css像在编程一般，你如果自认是Coder，没道理拒绝她。大力提倡使用Gulp，虽然它不会作用于所呈现的作品，无疑这货会大力节省你有限的时间，你若觉得忙，没道理不研究下她。Webpack，我还需要多说么？

• 还有辣么多没谈及的： 鉴于时间和篇幅，同上不提。!Perfect

实际比对VS：

鉴于时间&篇幅，再此就不操作了，有兴趣的亲可挑两种写法的统一活动，以Chrome神一样的工具对比之；推荐使用Chrome的Timeline，抑或参考网站性能优化工具大全。

以上浅析，难免谬误，欢请斧正，先行感谢。

:12/05/05 ~06

Vue+Webpack+Gulp+jade+Scss活动机制待解决问题：

嗯，Vue开发活动如今方在起步阶段，待解决&完善的地方，还有很多；方才一发性能VS，已多方提及了这套机制的优势，有兴趣的同事一起来继续使其臻于完善。相信我，这是一个很有趣而且大具价值的旅程。在此呢，列出些已知需要完善的点：

• 全套 Vue 机制打磨+测试+上线，以及修正&全面铺开。
• 最新 Vue 机制在其他平台对老活动的兼容
• 现有 Vue 机制对活动换皮的支持
• Webpack 打包过程缓慢(开启时巨慢)
• 组件的丰富以及用法&Demo展示
• 常用功能插件的提取&重封装
• Cdn缓存更新机制(目测Vue不用，待精准验证)
• jQuery，Ajax等摒弃和替代方案

以上。

组织欢迎你的加盟。

16/05/06