npm插件开发

好久没有发文章，最近在学react，简单测试一下npm插件（基于element进行table和分页封装）的打包发布，现在插件开发也是面试的一个亮点。

组件/插件

1. 局部组件(某处使用)
2. 全局组件(多次调用到就可以注册成全局组件（一般超过5次）)
3. 插件(共享vue生态圈，在不同项目中只要install都可以调用)

插件开发

//这里跟组件开发一样 plugins/组件
<template>
    <div>
        <el-table ref="el-from" :data="tableData" stripe style="width:100%" v-loading="loading">
            <!-- 多选框 -->
            <el-table-column v-if="configFlag.selection" type="selection" width="55" :align="align"></el-table-column>
            <!-- 序号列 -->
            <el-table-column v-if="configFlag.index" align="center" width="100" type="index" :index="1" :label="configFlag.indexName || '序号'" />
            <!-- 文本 -->
            <el-table-column v-for="item in tableTitleData" :key="item.id" :label="item.label" :prop="item.value" :sortable="item.sortable || false" :align="item.align || 'left'">
                <template #default="scope">
                    <slot v-if="item.slotname" :name="item.slotname" :soltval="scope.row" />
                    <span v-else>
                        {{ scope.row.value }}
                    </span>
                </template>
            </el-table-column>
        </el-table>
        <div class="block pageBox" v-if="pageObj.total">
            <el-pagination @current-change="handleCurrentChange" :currentPage="pageObj.page" background layout="prev, pager, next, jumper" :total="pageObj.total" :page-size="pageObj.size">
            </el-pagination>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'el-table-kz',
    props: {
        tableData: {
            type: Array,
            default: () => {
                return [{}];
            }
        },
        loading: {
            type: Boolean,
            default: true
        },
        configFlag: {
            type: Object,
            default: () => {
                return {
                    selection: false,
                    index: false
                };
            }
        },
        tableTitleData: {
            type: Array,
            default: () => {
                return [];
            }
        },
        pageObj: {
            type: Object,
            default: () =>{
                return {
                    total:0,
                    size:20,
                    page:1
                }
            }
        }
    },
    emits:['onchangepage'],
    setup(props,ctx) {
        const handleCurrentChange = (val: any) =>{
            ctx.emit('onchangepage',val);
        }
        return {
            handleCurrentChange
        };
    }
});
</script>

<style lang="scss" scoped>
@import 'index.scss';
</style>

核心代码 plugins/index.js

// 入口文件

// 动态引入文件
const requireComponnet = require.context('./',true,/\.vue$/);
// 插件
const install = Vue =>{
    if(install.installed) return;
    install.installed
    requireComponnet.keys().forEach(fileName =>{
        // 第i个组件
        const config = requireComponnet(fileName);
        // 组件名
        const componentName= config.default.name;
        // 注册成全局组件
        Vue.component(componentName,config.default || config);
    })
    // 全局自定义指令
    Vue.directive('focus', {
        inserted: function(el){
            el.focus();
        }
    })
}
// 环境检测
if(typeof window !== 'undefined' && window.Vue){
    install(window.Vue)
}

export default{
    install
}

这里插件开发就完成了，剩下就是打包上传的过程

打包/发布流程

//package.json
"lib": "vue-cli-service build --target lib --name el-table-kz --dest lib src/plugins/index.js"

npm run lib 
//执行后得到一个lib文件

//package.json

"private": false,  
"description": "基于element封装的表单分页插件，用于测试打包npm包",
"main": "lib/el-table-kz.umd.min.js",

登录npm

npm publish

这里有一定概率报错（原因：1.不能太多数字，会当成垃圾文件 2.npm包必须是唯一的，提前去npm上查看）

到这里就上传成功了，可以npm install el-table-kz去试一下

使用插件

<template>
  <ElTableKz :tableTitleData="tableTitleData" :tableData="tableData" :loading="loading" :pageObj="pageObj" @onchangepage="changePage">
    <template  #typeName="scope" >
        自定义slot:
        <span>{{scope.soltval.key}}</span>
    </template>
  </ElTableKz>

</template>

<script lang="ts">
import { defineComponent, ref,onMounted } from 'vue';
import ElTableKz from './plugins/el-table-kz/index.vue';

export default defineComponent({
  name: 'App',
  components: {
    ElTableKz
  },
  setup(){
    const tableTitleData = ref([
          { id: 1, label: '测试', slotname: 'typeName' },
          { id: 2, label: '测试2',align:'center' }
    ])
    const tableData = ref([
      { value: 3, key: '3-1' },
      { value: 4, key: '4-1'}
    ])
    const loading = ref(true);
    const pageObj = ref({
      page:1,
      size:20,
      total:80
    })
    const changePage = (val) =>{
      pageObj.value.page = val
    };
    onMounted(()=>{
      loading.value = false;
    })
    return {
      tableTitleData,
      tableData,
      loading,
      pageObj,
      changePage
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>