原文地址：https://doterlin.github.io/blog/2016/12/24/vue-pager/
所有源码和示例在这里。
Demo演示请点这里。

1.下载示例源码

为了更好的理解代码，建议通过以下方式将源码下载下来：

使用git下载(推荐):

git clone [email protected]:doterlin/vue-pagination.git

使用npm安装：

npm i vue-pagination-bs

或者点击下载zip

2.运行

直接打开indexl.html

3.修改代码

组件是通过webpack打包的，我们修改了代码是需要输入webpack命令进行编译生成最终的js文件才能看到修改后效果。要使用webpack命令需要在控制台安装好依赖：

npm install

等待依赖安装需要一段时间，我们可以先看看以下几节理解代码。

4.子组件

组件功能是vue.js的一个重要部分，除了使用Vue.component(tagName, options)方法注册一个组件外，我们可以写一个.vue文件，把组件的样式(style)，逻辑(script)，模板(template)存放在一个独立的文件，使得组件的维护更加容易，代码耦合度更小。但是浏览器是无法识别.vue文件的，我们需要借助webpack或者browserify这样的工具把文件打包成可运行的js文件就ok了。关于如何使用webpack配置vue可参考官方示例webpack-simple。

如果你还不熟悉webpack，你可以暂时使用本例子的配置(webpack.config.js)不进行重新不配置。
以下是代码，代码的解说放在注释里面，方便查看：

//pagination.vue  bootstrap风格分页组件
//author: doterlin
//2016-12-16

5.使用组件

写好了分页组件之后，就可以引入了。我把一个简单应用结构的分析成下图：

简单组件化模型

当然，一般应用都不会只是一层父子关系，而是几层甚至更多。所以实际的应用的结构应该如下图所示：

多层组件化模型

现在我们要做的就是写一个最大单元组件用于规划app，比如我们只做了存放分页组件，并对分页组件进行初始化（传入总页数，当前页数，页码变化回调）：

//App.vue 
//这是父组件示例
//author: doterlin
//2016-12-16

这样的话，如果有除了分页组件之外的其他组件，我们的编码入口也很明确是app.vue。

6.应用入口

我们把所有的组件放在根目录下的component目录下，用于存放所有组件。就此应用的组件已经布置完成，然后需要写一个vue实例用于渲染我们的组件大佬（app.vue）：

import Vue from 'vue'
import App from '../component/app.vue'

//一个vue实例
var app = new Vue({
    data: {},
    el: '#app',
    render: h => h(App),
    mounted() {
        
    }
})

7.编译

输入命令并回车：

npm run build

当webpack提示了打包成功信息后就会发现多个一个文件./dist/build.js，这就是编译后的代码。
有了可运行的js，我们就可以写一个html进行引入(刚才在./src/app.js需要渲染的元素是id="app")：



  
    
    
    vue-pagination-bs

最后运行index.html就可以把应用跑起来了。

总结

组件化是前端不可或缺的一部分。
vue将前端组件化做的更加明朗了，我们需要做的不只是他如何进行组织，更需要理解这种别样的组件化途径的思想。
实践永远是检验真理的唯一标准，与其看着别人用了高大上的东西在装逼，还不如自己去尝试并装逼。
做一个负责人的程序员和一个有专业精神的前端。

【vue】通过分页组件看vue简单组件化过程