# pages-plugin

**Repository Path**: chenzhizhuo/pages-plugin

## Basic Information

- **Project Name**: pages-plugin
- **Description**: 分页插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2019-07-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pages-plugin

#### 描述
基于vue 的一款分页组件。  
(1) 国际化支持 (vue/slot);  
(2) 分页插件： 支持国际化， 支持每页显示条数切换，上一页，下一页， 跳转到 指定页;  
***


#### Installation
- npm/cnpm i  //安装依赖包
- 依赖：
    -  vue
    -  vue-loader
  
- 这里版本要对应上否编译报错。  6.x 》 7.x
     - "babel-core": "^6.22.1",
     - "babel-loader": "^7.1.4",
     - "babel-preset-env": "^1.7.0",
- css-loader
- style-loader
- html-webpack-plugin  // 如果希望打包输出，已自定模板并生成注入引用的html文件
***

#### 指令说明
1. npm run start // 启动服务
2. npm run build // 打包
***

#### 使用说明
``` 
 *  1. 全局注册组件方式
 *  import PagesPlugin form 'pages-plugin'  
 *  Vue.use(PagesPlugin)  
 *  支持国际化（默认中文）  
 *  在你的组件中如何使用：  
    使用该插件支持在标签内自定义设置国际化属性（不设置则默认中文文本）：  
 *  <pages-plugin :page-count="count" :page-size="pageSize" :call-back="pageChangeCB" :size-array="[10, 20]">
  *   <template slot="rowscount">Show row number（显示行数）：</template>
      <template slot="prvpage">Previous page（上一页）</template>
      <template slot="page">Page(页)</template>
      <template slot="total">Total（共）</template>
      <template slot="the">The（第）</template>
      <template slot="goto">Jump to（跳到第）</template>
      <template slot="nextpage">Next page（下一页）</template>
    </pages-plugin>
****
*  2. Vue 原型方式
   *  import PagesPlugin form 'pages-plugin'  
   *  Vue.use(PagesPlugin) 
   *  该方式暂未提供国际化实现（是可以实现的）
   * 一般放在mounted 的时候初始化使用（需要使用分页的页面中引入即可）
   * this.$initPages(this.pagesCallBack, bindElementId, initPageCount, initPageSize, pageType, sizeArray)
   * 在页面组件需要的位置定义自己的插入分页位置（bindElementId），插件即可在指定tag id  位置插入dom。
   *  


*  注意事项：
   注意组件在本地开发测试时，webpack.config.js devServer 及 入口相关配置修改
``` 

#### 其它知识点总结  
(1). 每次发布npm需要更新版本编号  
可以直接手动在package.json中更改version字段。当然，也可以使用命令  
npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease  [--preid=<prerelease-id>] | from-git]  
此命令，会在git commit中生成一条记录，并标记tag。 
解释下以下三种：patch、minor、major  
patch: 补丁发布，向后兼容的bug修复，增加第三个数字。1.0.1  
minor: 轻微发布，向后兼容的新特性，将中间数字增加并将最后一位数重置为0。1.1.0  
major: 重大发布，破坏向下兼容的变化，将第一个数字增加，并将后两位数重置为0。2.0.0  
  
(2). 发布npm   
    (1) 打包好需要发布的文件  
    (2) npm login   输入账号、密码, 注册邮箱  
    (3) npm publish  发布即可  


#### 问题总结：
    1). 如何排除不想发布到npm上的文件  
      通过在.npmignore 文件中配置文件夹名即可  
    2). 如何更新一个npm 插件  
       更新方式与发布一个新插件一样： npm publish. 但是需要修改package.json 中的version 版本号。否则会报错  
    3). 注入式插件本地dev 开发入口文件绑定 #app, 发布时不需要vue的实例操作怎么处理？  
       将webpack.config.js 中的入口文件指向 src 的暴露 install 的js文件即可。  
    4). 如果只发布打包好的dist 文件夹，那么插件在哪里告知使用者，主入口文件是哪个？  
       通过设置package.json 文件中的 "main": "dist/pages.min.js", 项即可。  
    5). 为什么安装插件使用时提示没有找到插件名xx, 或者插件不存在？  
       这个情况有点多：  
      * 在插件的组件内设置name （如：pages-plugin）  
      * 设置 package.json 文件中的name属性值（尽量保持一致：pages-plugin）  
      * npm包名（安装时的名字如：pages-plugin@1.0.1） 尽量保持一致  
      * install 方式需要在使用时（先 import xxx from xxxxxxx 你的插件），通过Vue.use(xxx) 注册到vue中。  
      * 使用插件时用的组件名称是对应插件主键中设置的name属性值。 如： pages-plugin  
    6). 若是组件开发可通过@组织(命名空间)/库名 的形式来命名组件。
        发布的时候部分情况会提示名字已存在，发布失败。此时可以通过 npm publish --access public 来发布
       （例：npm publish --access public @czzui/page-plugin）
    
****


#### 展示效果简述
   
   显示条数 10 20 30 50  上一页  总共x页  第x页  下一页  转到第 | x | 页  
****


#### github
[GitHub地址:https://gitee.com/chenzhizhuo/pages-plugin](https://gitee.com/chenzhizhuo/pages-plugin)