npm包的创建过程

一、目录文件创建、组件写入、本地运行自测

1、创建一个packages文件，用于存放你的组件及其工具类函数等。

提示、1、packages/组件目录名/ 下新建 index.js 这个为引入入口文件, Vue.use()全局注册时会使用到

​ 2、packages/组件目录名/ 下新建src目录, src目录下生成组件文件(可以包含一个或多个vue文件)

2、封装一个简单组件demo,下面为基于elementUI封装的分页组件为例。

*注意: 1、 vue 文件必须是署名文件，存在 name 字段信息*

*注意: 2、创建组件目录，建议使用小写字符 + 减号 +分隔单词，例如：custom-pagination*

<template>
  <div class="pagination">
    <el-pagination
      background
      :page-sizes="pageSizes"
      :page-size.sync="size"
      :current-page.sync="current"
      :layout="layout"
      :total="total"
      :disabled="disabled"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      class="right"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "CustomPagination",
  props: {
    //每页显示条数
    pageSize: {
      type: [String, Number],
      default: 10,
    },
    //默认在第几页
    currentPage: {
      type: [String, Number],
      default: 1,
    },
    //总条数
    total: {
      type: [String, Number],
      default: 0,
    },
    //每页可选显示条数
    pageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100];
      },
    },
    //布局设计
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    //是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    current: {
      get() {
        return this.currentPage;
      },
      set(val) {
        this.$emit("update:currentPage", val); //改变当前为第几页的值赋值给父组件
      },
    },
    size: {
      get() {
        return this.pageSize;
      },
      set(val) {
        this.$emit("update:pageSize", val); //改变当前页显示几条数据的值赋值给父组件
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit("pagination", { currentPage: 1, pageSize: val });
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { currentPage: val, pageSize: this.pageSize });
    },
  },
};
</script>

a、属性参数配置

| 参数 | 说明 | 类型 | 默认值 | | :---------: | :--------------: | :-------------: | :---------------------------------------: | | pageSize | 每页显示条数 | String / Number | 10 | | currentPage | 默认在第几页 | String / Number | 1 | | total | 总条数 | String / Number | 0 | | pageSizes | 每页可选显示条数 | Array | [10, 20, 50, 100] | | layout | 布局设计 | String | "total, sizes, prev, pager, next, jumper" | | disabled | 是否禁用 | Boolean | false |

b、自定义事件

| 事件名称 | 说明 | 回调参数 | | :--------: | :----------------------------------: | :---------------------------------------------: | | pagination | pageSize 或 currentPage 改变时会触发 | 每页条数和当前页：{ currentPage:1,pageSize: 10} |

3、封装好组件后，进行本地项目调用查看是否可以使用。

a、在main.js里面注册组件

import Vue from 'vue'
import App from './App'
import store from './store'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

import CustomPagination from '../packages/custom_pagination/index.js'

Vue.use(CustomDialog)


Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

b、引用组件，进行调用

<template>
  <div style="text-align: right; padding: 15px 0">
    <ustomPagination
      :total="total"
      :currentPage.sync="pageParams.currentPage"
      :pageSize.sync="pageParams.pageSize"
      @pagination="handlePageChange"
      >
    </CustomPagination>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        pageParams: {
       	  pageSize: 10,
          currentPage: 1,
          total: 50,
      	},
      }
    },
    method:{
      handlePageChange(data) {
        this.pageParams.currentPage = data.currentPage;
        this.pageParams.pageSize = data.pageSize;
      },
    }
  }
</script>

c、本地项目调用预览效果：

二、组件封装好自测通过进行组件的批量导出

1、在package目录下创建的index.js文件，用于注册或批量注册已封装好的组件和方法。

import CustomPagination from './custom_pagination/src/Main.vue'
import CustomDialog from './custom_dialog/src/Main.vue'
import CustomTable from './custom_table/src/Main.vue'
import CustomSearch from './custom_search/src/Main.vue'

const components = [
  CustomPagination,
  CustomDialog,
  CustomTable,
  CustomSearch
]

// 定义 install 方法，接收 Vue 作为参数。如果项目使用 Vue.use 注册本插件，则列表中的组件都将被注册
/*
  1. Vue.use 可以接收一个对象
  2. 对象obj中需要提供一个 install 函数
  3. 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器
  4. 用vue.use进行组件注册时候，会首先判断组件的installed属性是否为true,为true说明此组件已经注册过
     如果没有注册的话,在use注册的同时,会给组件添加一个属性installed：true
  5. 插件的install方法将接收两个参数，第一个是参数是Vue，第二个参数是配置项options
*/
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 批量组件注册
  components.forEach(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  version: '1.0.0',
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  ...components
}

三、编辑项目中的package.json文件，并执行打包

| 名称 | 描述 | 是否必填 | | :-----------: | :------------------------------------------------: | :------: | | description | 组件包描述信息 | | | keywords | 字符串数组，便于用户在npm上搜索到我们的项目 | | | version | 项目版本号 | | | name | 名称，必须是字符串，不能以.或_开头，不能有大写字母 | 必填 | | version | 版本号码 | 必填 | | main | 项目文件入口，文件自动生成，不需要改动 | |

*注：package.json文件中最重要的就是name和version字段，这两项是必填的。名称和版本一起构成一个标识符，该标识符被认为是完全唯一的。对包的更改应该与对版本的更改一起进行。name必须是字符串，不能以.或_开头，不能有大写字母，因为名称最终成为URL的一部分因此不能包含任何非URL安全字符。 npm官方建议我们不要使用与核心节点模块相同的名称。不要在名称中加js或node。如果需要可以使用engines来指定运行环境。 *

1、package.json配置打包组件命令。

npm run package

a、参数说明：

| 关键词 | 说明 | | :----------: | :----------------: | | --target lib | 指定打包的目录 | | --name | 打包后的文件名称 | | --dest | 打包后文件夹的名称 |

b、执行打包命令，生成了一个lib文件

  npm run package

2、package.json配置部署组件命令。

npm run deploy
//deploy是 ”Nexus的镜像地址“

四、安装并使用已发布包

// 1、在具体项目中使用命令 `npm install 组件包名` 安装自定义组件
npm install wiseda_npm_vue2

// 更新, 然后查看node_modules目录中对应的版本信息
npm update wiseda_npm_vue2

// 更新失败时, 先卸载再安装,或者指定版本
npm uninstall wiseda_npm_vue2
npm installl wiseda_npm_vue2@^版本信息