前言

在对着产品高举中指怒发心中之愤后，真正能够解决问题的是自身上的改变，有句话说的好：你虽然改变不了全世界，但是你有机会改变你自己。秉承着“不听老人言，吃亏在眼前”的优良作风，我还是决定玩火自焚。

问题所在

之前的项目总结为以下内容：

1、AMD模块规范开发，使用requirejs实现，使用rjs打包，最终导致的结果是，输出的项目臃肿，肿的就像一坨狗不理……不忍直视

2、使用gulp进行打包，这一点貌似没有可吐槽的地方，毕竟都是被grunt折磨过来的……

3、数据的渲染使用模板引擎，这就意味着你要手动管理DOM，这样，你的业务代码参杂着你的数据处理、DOM管理，满屏幕的毛线……

4、模块化不足，虽然使用require进行了模块管理，但是大部分业务逻辑还是充斥在一个文件里，这与最近流行的组件化概念冰火不容，拒绝落后……

5、诸如 扩展性 、 维护性 我想早已不言而喻，不需赘述，再述就真TM是累赘了。

新框架要解决的问题：

1、要使构建输出的项目像你邻家小妹妹一样、瘦的皮包骨。（也许是营养不良）

2、要实现真正的模块化、组件化的开发方式，真正去解决维护难、扩展难的问题。（从此不怕产品汪）

3、业务逻辑专注数据处理，手动管理DOM的年代就像……像什么呢？（毕竟成人用品也越来越自动化了）

4、等等…….（其实好处无需赘述，来，往下看）

为了达成以上目标，我们探讨一下解决方案：

1、老项目的构建输出为什么臃肿？

答：因为使用的是require的rjs进行构建打包的，了解rjs的都知道，它会把项目所有依赖都打包在一个文件里，如果项目中有很多页面依赖这个模块，那么rjs并不会把这个模块提取出来作为公共模块，所以就会有很多复制性的内容，所以项目自然臃肿。

解决方案：使用webpack配合相应的loader，来完成模块加载和构建的工作。

2、老项目为什么模块化的不足？

答：老项目的模块化，仅仅体现在js层面，解决了模块引用的问题，但在开发方式上，依然可以看做是过程式的，这样的结果就导致了项目的难扩展和难维护，让开发人员在与产品汪的对峙中，并不从容。

解决方案：Vue.js能够很好的解决组件化的问题，配合 Vue.js 官方提供的 vue-loader 能够很好的结合webpack做组件化的开发架构。

3、如何避免手动管理DOM？

答：如果你在做数据展示这一块的开发工作，相信你一定体会颇深，发送http请求到服务端，拿到返回的数据后手动渲染DOM至页面，这是最原始的开发方式，无非再加一个模板引擎之类的，但最终还是避免不了手动渲染，如果页面逻辑复杂，比如给你来一个翻页的功能，再来一个筛选项，估计你会觉得世界并不那么美好。

解决方案：MVVM模式能够很好的解决这个问题，而Vue.js的核心也是MVVM。

webpack

你肯定听说过webpack，如果直接对你描述什么是webpack你可能感受不到他的好处，那么在这之前，我相信你肯定使用过gulp或者grunt，如果你没使用过也可以，至少你要听说过并且知道gulp和grunt是干什么的，假如这个你还不清楚，那么你并不是一个合格的前端开发人员，这篇文章也不适合你，你可以从基础的地方慢慢学起。

gulp和grunt对于每一个前端开发人员应该是不陌生的，它们为前端提供了自动化构建的能力，并且有自己的生态圈，有很多插件，使得我们告别刀耕火种的时代，但是它们并没有解决模块加载的问题，比如我们之前的项目是使用gulp构建的，但是模块化得工作还是要靠require和rjs来完成，而gulp除了完成一些其他任务之外，就变成了帮助我们免除手动执行命令的工具了，别无它用。

而webpack就不同了，webpack的哲学是一切皆是模块，无论是js/css/sass/img/coffeejs/ttf….等等，webpack可以使用自定义的loader去把一切资源当做模块加载，这样就解决了模块依赖的问题，同时，利用插件还可以对项目进行优化，由于模块的加载和项目的构建优化都是通过webpack一个”人“来解决的，所以模块的加载和项目的构建优化并不是无机分离的，而是有机的结合在一起的，是一个组合的过程，这使得webpack在这方面能够完成的更出色，这也是webpack的优势所在。

如果你看不懂上面的描述，没关系，你只需要知道一下几点：

1、过去使用require和rjs等进行模块加载的方式，可以替换为webpack提供的指定loader去完成，你也可以自己开发加载特定资源的loader。

2、过去使用gulp和grunt完成项目构建优化的方式，可以替换成webpack提供的插件和特定的配置去完成。

3、由于模块的加载和项目的构建优化有机的结合，所以webpack能够更好的完成这项工作

4、并不是说有了webpack就淘汰的gulp等，有些特定的任务，还是要使用gulp去自定义完成的。但是不保证webpack的未来发展趋势会怎么样。

Vue.js

Vue.js是一个MVVM模式的框架，如果读者有angular经验，一定能够很快入门Vue的，那么问题来了，为什么使用Vue而不用angular，

首先，Vue的体积小，轻量在移动端开发始终是一个不可忽略的话题，其次，Vue在实现上与angular有本质的区别，读者可以通过下面两个链接来了解：

1、

2、

npm 的全称是 nodejs包管理，现在越来越多的项目(包)都可以通过npm来安装管理，nodejs是js运行在服务器端的平台，它使得js的能力进一步提高，我们还要使用nodejs配合 webpack 来完成热加载的功能。所以读者最好有nodejs的开发经验，如果有express的经验更好。

让我们一步一步从零搭建这个项目

首先新建一个目录，名为 myProject ，这是我们的项目目录。然后执行一些基本的步骤，比如 npm init 命令，在我们的项目中生成 package.json 文件，这几乎是必选的，因为我们的项目要有很多依赖，都是通过npm来管理的，而npm对于我们项目的管理，则是通过package.json文件：

执行npm init之后，会提示你填写一些项目的信息，一直回车默认就好了，或者直接执行 npm init -y 直接跳过询问步骤

然后我们新建一个叫做 app 的目录，这个是我们页面模块的目录，再在app目录下建立一个index目录，假设这个是首页模块的目录，然后再在index目录下建立一个 index.html 文件和 index.js 文件，分别是首页入口html文件和主js文件，然后再在index目录下建立一个components目录，这个目录用作存放首页组件模块的目录，因为我们最终要实现组件化开发。这样，当你完成上面的步骤后，你的项目看上去应该是这样的：

接下来通过npm安装项目依赖项：

这个时候，你的package.json文件看起来应该是这样的：

我们安装了 babel 一系列包，用来解析ES6语法，因为我们使用ES6来开发项目，如果你不了解ES6语法，建议你看一看阮老师的教程，然后我们安装了一些loader包，比如css-loader/vue-loader等等，因为webpack是使用这些指定的loader去加载指定的文件的。

另外我们还使用 npm install vue –save 命令安装了 vue ，这个就是我们要在项目中使用的vue.js，我们可以直接像开发nodejs应用一样，直接require(‘vue');即可，而不需要通过script标签引入，这一点在开发中很爽。

安装完了依赖，编辑以下文件并保存到相应位置：

1、index.html文件：

2、index.js文件：

3、在components目录下新建一个 Favlist.vue 文件，作为我们的第一个组件：

loaders: [
  // 使用vue-loader 加载 .vue 结尾的文件
  {
    test: /\.vue$/,loader: 'vue'  
  },{
    test: /\.js$/,exclude: /node_modules/
  }
]

我们之前所面临的问题是，如果我们的代码改动了，我们要想看到浏览器的变化，需要先对项目进行构建，然后才能查看效果，这样对于开发效率来讲，简直就是不可忍受的一件事，试想我仅仅修改一个背景颜色就要构建一下项目，这尼玛坑爹啊，好在有中间件，它是对webpack一个简单的包装，它可以通过连接服务器服务那些从webpack发射出来的文件，它有一下几点好处：

1、不会向硬盘写文件，而是在内存中，注意我们构建项目实际就是向硬盘写文件。

2、当文件改变的时候，这个中间件不会再服务旧的包，你可以直接帅新浏览器就能看到最新的效果，这样你就不必等待构建的时间，所见即所得。

下面我们在build目录中创建一个 dev-server.js 的文件，并写入一下内容：

此时，我们在项目根目录运行下面的命令，开启服务：

如果看到下图所示，证明你的服务成功开启了：

接下来打开浏览器，输入：http://localhost:8888/app/index/index.html

回车，如果不出意外，你应该得到一个404，如下图：

我们要对我们的 webpack.config.js 配置文件做两处修改：

1、将 config.output.publicPath 修改为 ‘/‘：

2、将 plugins 中 HtmlWebpackPlugin 中的 filename 修改为 ‘app/index/index.html'

重启服务，再刷新页面，如果看到如下界面，证明你成功了：

但是这样开发模式下的确是成功了，可是我们直接修改了 webpack.config.js 文件，这就意味着当我们执行 构建命令 的时候，配置变了，那么我们的构建也跟着变了，所以，一个好的方式是，不去修改webpack.config.js文件，我们在build目录下新建一个 webpack.dev.conf.js文件，意思是开发模式下要读取的配置文件，并写入一下内容：

这样，我们在dev环境下的配置文件中覆盖了基本配置文件，我们只需要在dev-server.js中将

修改为：

即可，然后，重启服务，刷新浏览器，你应该得到同样的成功结果，而这一次当我们执行构建命令：

并不会影响构建输出，因为我们没有直接修改webpack.config.js文件。

现在我们已经使用 webpack-dev-middleware 搭建基本的开发环境了，但是我们并不满足，因为我们每次都要手动去刷新浏览器，所谓的热加载，意思就是说能够追踪我们代码的变化，并自动更新界面，甚至还能保留程序状态。要完成热加载，我们就需要使用另外一个中间件 webpack-hot-middleware

2、webpack-hot-middleware

只配合 webpack-dev-middleware 使用，它能给你提供热加载。