在本篇中，我们要把之前做的Vue.js项目组件化，组件化的优点可以见官网介绍 ：
https://cn.vuejs.org/v2/guide/single-file-components.html
组件化的过程我会一步一步来，而不是去使用官网提供的脚手架 vue-cli ，用脚手架虽然来的快而且方便，但是会缺乏对于其中原理的理解，在以后由浅入深的过程中遇到了问题将会变得难以解决。好了，话不多说，下面介绍如何实现组件化。
首先，我们要把关于组件的所有内容写到一个单独的文件中去，比如下面的 TopBar.vue ：
TopBar.vue
TopBar组件的模板、脚本以及样式都体现在了一个文件中，更加便于管理和编写。接下来以同样的方式创建 SidePane.vue 和 ContentArea.vue 。
然后，浏览器肯定是不能识别 .vue 文件的，这时我们需要一个加载器（loader）将 .vue 文件转换为浏览器能识别的 .js 文件 ，这项工作需要用 vue-loader 加载模块来完成，再进一步看待问题，在单文件组件变得越来越多的情况下，引用它们将是一件非常繁琐的工作，这时候我们就需要用到 webpack 了，webpack能够根据文件间的依赖关系，将依赖树上的所有文件按照规则打包成一个或者多个文件。webpack 的工作原理就像下面的图表示的一样：
webpack工作原理
最后，我们就用 webpack 和一些用到的模块来将我们的单文件Vue组件解析并打包，然后在网页中引用就可以了。
简单介绍了原理，下面开始着手组装。首先我们新建一个目录，名字就是工程名，如我的叫做vue-project ，进入到工程目录下，打开命令行（shift+鼠标右键选择在此处打开)，运行命令
cnpm init
一路回车下去完成。其实这个步骤就生成了一个 package.json 文件。然后我们按照下面这个目录树新建目录和文件（忽略node_modules）：
目录
其中 dist 目录用来放置我们生成的打包文件 bundle.js ， node_modules 是安装各种模块时自动生成的，src 是我们主要工作的地方，src/assets 用来放图片、音乐等资源文件，src/components 用来放我们的组件文件，src/css 放样式文件；从最下面开始介绍几个重要文件， webpack.config.js 是 webpack 的配置文件，用来指导 webpack 如何对资源进行打包，server.js 还是之前用的，package.json用来记录整个项目用到的依赖，index.html 是网页入口，src/index.js 是项目入口，在里面创建Vue实例，src/App.vue用来引用那些零散的组件，组成一个完整的模板。
将代码拷到本地之后，在工程目录下运行：
cnpm install
webpack
node server.js
然后在浏览器打开 http://127.0.0.1:8888/ 就可以看到结果了，结果跟第二篇结果一样，变的只有项目的组织架构而已。
今天涉及的知识有些多，具体文件内容的图我就不贴了，有兴趣可以将代码下下来研究，其实都是些很简单的内容，很容易看懂。如果有必要我会单独讲讲 webpack 的用法。
代码
http://pan.baidu.com/s/1kVtIj6B 密码 svw3