一、作者简介
WONDER专注于框架的研究，致力于提高效率、解放生产力。 包括但不限于设计流程、重构流程、前端流程、基于数据流和状态流的自动化测试。 致力于基于JavaScript语言的全平台解决方案研究（包括后端（vue为核心）、后端（thinkjs为核心）、终端（weex为核心、小程序为辅助）），以“技术引擎”为目标的创意为业务方提供强劲动力和生产力。
2. 前言
很早以前在WONDER学习的时候，大家经常用记事本写原生代码的能力来衡量一个人写代码的能力。 我会对使用 jQuery+Dreamweaver 嗤之以鼻（当时还没有 Webstorm 这样的利器）。 回到现在，那些特别厉害的前辈也对一些框架嗤之以鼻，一些框架的使用经验也被拉进了演讲主题的黑名单。
这些现象的本质是，牛逼的人感觉使用这个框架的人“技术没有专注力”，显得不够牛逼，不够引人注目。 但从项目和团队的一致性来看，who care 的水平很强。 质量和效率是第一要素。 深入研究和合理利用框架是大势所趋。 我们期待着三天的时间，可以通过鼠标点击完成以前需要加班的任务，剩下的时间可以陪伴家人、陪伴妻子、养花养草。
另外，随着近期AI智能的流行，可以预见，智能编程、云编程将是未来的大趋势。 让我们开始为未来的进化奠定基础。
3. 镜框选择
没有哪个框架是万能的，都有它的适用场景。 我们的初始定位必须围绕我们的业务来选择。 我们的个性化业务是基于移动设备的多页面应用程序。 经过综合考虑，我们决定使用vuejs+typescript+webpack2作为现在和未来的核心主框架，未来的演进也将在此基础上进行。
1.为什么使用vuejs
早些年，前端MVVM框架出现了爆发式的衰落，比如Angular、React、Vuejs、Avalon、Metro等。 经过对这个框架的对比，我们最终选择了vuejs作为我们业务的“核心引擎”。 原因如下：
1）Angular和React实际上很流行，但学习曲线仍然太陡峭。 你需要了解很多东西，而且入门并不容易。 Vuejs 非常容易上手，而且语法也很简单。 我们测试过，有后端基础但从未接触过vuejs的朋友基本上一天就可以开始开发一个简单的应用程序。 几天之内，通过学习模块组件的概念，基本可以完成中等复杂的业务。 这是其他框架无法比拟的。
2）vuejs的文档非常友好。 当然，其他框架的文档建设也在加强。 这也告诉我们一个东西能否普及。 有两个核心点。 一是使用方便，二是足够方便理解。 Vuejs 就是这样做的，所以才流行起来。
3）vuejs体积小，适合移动业务。 vuejs经过gzip压缩后的代码是react的一半。 而且移动端基本不存在兼容性问题。 PC端兼容IE9+。 如果是PC业务的话，其实我们现在只兼容IE9+。 在兼容性问题上浪费时间完全是浪费生命。 所以今天的后端开发者，感谢这个时代。
4）在最新版本的vuejs中，我们逐渐学习到了其他框架的一些优秀思想。 如果我们能够深入的学习和使用一个框架，我想就足以满足我们的业务需求了。
2. 为什么使用打字稿
1）数据流结构标准化的重要性
在业务需求的初始阶段，我们就意识到标准化数据流结构的重要性。 由于vuejs本质上是一个MVVM框架，因此引入了数据流的概念。 但JS是弱类型语言，数据流本身比较随意。 例如，Button的属性有三个基本数据属性：按钮文本（text）、按钮状态（status）、按钮进度（process）。 但团队中不同的人可能有自己的看法，Button 的定义和命名也可能不同。 从长远来看，注定很难维护。 这时，数据结构（接口、强类型）的规范就显得尤为重要。 有了这个概念的引入，基本组件的定义和规范在代码编译阶段自然就形成了约定（不按照规范编译就不会通过），比文档有效和方便得多规范限制。
Typescript正是因为这样的需求而诞生，并且充分考虑了兼容性。 完全兼容之前的JS代码。
2）利用ES6/ES7特性，具有优秀的自编译能力
很多ES6/ES7项目的编译都是通过babel来处理的。 不熟悉的同学可能需要很长时间才能完成配置。 而且babel也有babel5和babel6的区别，两者兼容性不太好。
Typescript具有自编译能力，不需要另外引入babel。 只需依赖tsconfig.json，将此文件放在项目根目录下，就可以全局配置了。
除了满足babel的编译功能之外，typescript比babel做得更好。 例如，对于非常重要的 async/await 句型，babel 在使用时会引入一个相当大的文件：
Typescript 非常干净整洁，只有几十行代码：
3）Typescript 2.0引入了@types，系统地解决了大多数公共库的类型定义问题。
WONDER在生产项目中没有使用TypeScript的很大原因是类型定义太麻烦。 从DefinitelyTyped到typings，最后是@types。 微软自己也发现了这样的问题，所以还在不断发展。 目前@types是一个很好的解决方案。 充分利用npm进行管理和维护，而且大多数公共库已经支持@types，比如@types/jquery、@types/node等，Vue更先进。 vue 模块直接支持 typescript 类型定义。 不需要额外的@types/vue。 也就是说npm install vue在typescript中是可以正常使用的。
3.为什么使用webpack2
使用webpack2的核心是使用tree-shaking特性。 Tree-shaking是大势所趋，符合代码极简主义，提高代码利用率。 代码简化程度相当高，大约可以优化30%的代码量。
要使用webpack2的tree-shaking，前提是使用ES6模块，这是核心基础。 这意味着所有代码都必须基于ES6模块编写。 建议以较低的成本开始一个新项目。
阶段总结：
1、使用vuejs从数据驱动的角度处理逻辑，操作DOM，彻底放弃zepto/jQuery
2.由于采用数据驱动，数据本身的结构非常重要，再加上ES6/ES7的方便优雅的使用，我们引入了TypeScript作为主要开发语言。
3、使用ES6模块构建代码，利用webpack2的tree-shaking来简化代码体积，提高代码利用率。
4、项目实践
从本章开始，我们将结合线上项目来谈谈框架的使用和细节。 此次推出的项目名为“个性化体验卡”。 基本上这个项目是用来从头开始搭建一个基础底层的，项目本身是一个多页面项目。
1. 项目结构
首先是项目结构，基本上只需要一个公共库目录和项目本身目录。
公共图书馆目前基于common和shim。 这里很重要的是，mqq库重绘后，从原来的1400行减少到了200行。 去掉了很多无用的代码，简约风格。
项目本身的目录也很容易理解：
common——项目的公共方法目录，比如helper之类的
comp - 项目的组件目录，核心目录。以后每个业务都会被组件复用
css——CSS目录，发布时会内联到html中
html——入口文件目录，基本上就是一个框架，如下图：
由于tree-shaking的激励，我们的首屏业务逻辑代码可以直接内联到页面中，复杂的副屏逻辑可以作为动态组件加载。 形成直接输出+主体嵌入JS+异步动态JS组件的高贵加载模式。
详细提示：
下面就一些开发细节给大家讲解一下。 上图中，我没有将vuejs作为模块插入到detail.entry.js中webpack页面复用，因为首先，它额外减少了js的大小，其次，我们的项目是一个多页面项目，公共vuejs可以而且必须被缓存并重用。
这里采用外链离线包+强缓存的方式比较合理。
2.配置文件
初学者在做配置的时候通常会感到困惑，所以就有了脚手架这样的东西来帮助初学者快速搭建环境，但实际上大家所从事的项目并不完全一样。 脚手架并不能完全满足需要。 因此，有必要了解配置的基本原理。
本文基于vuejs、typescript、webpack2的框架webpack页面复用，用gulp把几个东西串起来。
因为本文的脚手架结合了项目本身的各种功能，以后WONDER有时间拆下来的时候我会更新这篇文章。 以下是首先需要关注的几个核心点。
1）npm安装几个最重要的模块
gulp、vue、vue-class-component、typescript、webpack、@types/node、ts-loader、text-loader
安装完这些之后，基本上项目中用到的核心模块就都可用了。
2）配置tsconfig.json
{
"compilerOptions": {
//语法编译为es5语法
"target": "es5",
//模块采用import语法且不作转换，转换工作交给gulp任务中的webpack2
"module": "es2015",
//用NPM模式加载
"moduleResolution": "node",
//对于没有Export的库进行兼容
"allowSyntheticDefaultImports": true,
//开启修饰器模式
"experimentalDecorators": true,
//识别基本的系统类库
"lib": [
"dom",
"es5",
"es2015"
],
"baseUrl": ".",
"paths": {
//这里根据自己项目的情况指定alias目录
"lib/*": [
"./litelib/*"
]
}
}
}详细提示：
这个配置非常关键。 建议初学者直接复制（根据自己项目指定的路径除外）。 每个配置都很有用。 我也写了笔记，大家不要随便删除。
3）webpack.config.js配置
详细提示：
注意红框部分，一定不要配置错误。
这样写externals的目的并不是为了封装vue，所以一定要注意大小写。 大小写不正确很容易出错。 不懂的初学者直接copy。
只要配置这一条规则，其实就是对模板html文件的处理。 由于我们的代码（IDE WebStorm的一个功能）在编译时会转换为js，所以webpack不需要添加ts-loader。 但最理想的状态是把编译过程交给webpack或者gulp，IDE不会手动编译js文件，这样源码比较纯净。
3.如何在vuejs中编写组件
Vuejs 似乎是一个非常灵活的框架，可以通过多种方式编写。 官方文档中有很多vue组件的编写方式。 但在TypeScript中，书写方式较之前发生了很大的变化（不过看起来和React、AngularJS很相似）。 如果你不这样写，你会发现你的编辑器到处都是错误。 。 因此，我们在线项目中的组件目前如下所示：
这是一个组件，怎么使用呢，我们看一下入口文件的JS。
