如何在npm官网发表自己的封装的包

爱编程的梨清

已于 2022-04-15 15:54:30 修改

阅读量862

点赞数 2

分类专栏： npm

于 2022-04-15 15:51:24 首次发布

本文链接：https://blog.csdn.net/nbsl_/article/details/124194868

版权

Vue.js npm 组件封装发布流程自定义指令

关键词由CSDN通过智能技术生成

npm 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

以下就是我在npm发布的包，可以搜索安装

自己封装的组件插件，不用再复制粘贴到自己的其他项目使用了，发布到npm，在项目中下载使用自己的包不香吗

在这里插入图片描述

发布流程如下：

一、首先你要有自己的npm账号

使用用户名，密码，邮箱注册

二、在Vue-cli搭建的项目的src文件下新建文件夹

可以在文件夹下新建一些自己插件需要使用的组件，在入口主文件新建自定义指令，构成基本结构

以我的插件为例目录结构如下：
在这里插入图片描述

三、业务如下

还是以我的插件为例，主要功能是提交表单内容，如果为空，自定义加入样式提示效果，其中在index.js自定义了输入框默认选中指令，这个例子比较简单，基本就是这些

1.myMsg.vue

<template>
  <div>
    <div class="msg" ref="msg" :class="{active:msgStatus}">
      <div class="msg-wapper">
        {{text}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myMsg',
  data () {
    return {
      text: '',
      msgStatus: false
    }
  },
  methods: {
    // 以默认配置为优先，以用户传入为覆盖
    msgPlugin (msg, time = 2000) {
      this.text = msg
      this.msgStatus = true
      setTimeout(() => {
        this.msgStatus = false
      }, time)
    }
  }

}
</script>

<style lang="less" scoped>
.msg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 0;
  min-height: 0;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  color: #fff;
  transition: all .5s;
  z-index: -1;
  opacity: 0;
}
.msg.active{
  width: 180px;
  height: 30px;
  line-height: 30px;
  opacity: 1;
  z-index: 11;
}
</style>

2.myDemo.vue

<template>
  <div>
   <h1>我是demo组件</h1>
  </div>
</template>

<script>
export default {
  name: 'myDemo'
}
</script>

<style>

</style>

3.index,js

在index.js中，使用了vue-cli自带的webpack的api require.context()
所有的import 都可以使用require.context引入而且是动态引入
require.context()的参数：
1.目标文件夹2.是否匹配子文件夹3.正则匹配
可以优雅的把插件下的很多.vue结尾的组件全部引入注册
其中requireComment.keys()是所有.vue结尾的文件数组
fileName是每一个vue文件的循环项
config.default.name里的default就是.vue组件的script里的export default组件名称
也就是<script> export default { name: 'myDemo' } </script>
Vue.component(componentName, config.default || config)是对组件进行注册

const requireComment = require.context('./', true, /\.vue$/)
const install = (Vue) => {
  if (install.installed) {
    return
  }
  // eslint-disable-next-line no-unused-expressions
  install.installed
  console.log(requireComment.keys())
  requireComment.keys().forEach(fileName => {
  //  拿到当前的组件
    console.log(fileName)
    const config = requireComment(fileName)
    // 组件名
    const componentName = config.default.name
    Vue.component(componentName, config.default || config)
  })
  // 全局自定义指令
  Vue.directive('focus', {
    inserted: function (el) {
      el.focus()
    }
  })
}
// 确保是正常环境 node没有window
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  install
}

4.main.js

把index.js作为插件引入，并使用

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import myMsg from '@/plugins/index.js'
Vue.config.productionTip = false
Vue.use(myMsg)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

5.在HelloWorld.vue中使用

其中在plugins的左右vue组件只要带有name的都可以直接使用
因为在index.js已经全部动态引入了，无需再次注册
<my-demo></my-demo>就是例子

<template>
  <div>
    <h1>自定义插件学习</h1>
    <input v-focus type="text" v-model="tel"> <button @click="commitPhone">提交</button>
    <my-msg ref="msg"></my-msg>
    <my-demo></my-demo>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tel: ''
    }
  },
  methods: {
    commitPhone () {
      if (!this.tel) {
        this.$nextTick(() => {
          this.$refs.msg.msgPlugin('请输入电话号码', 1000)
        })
      }
    }
  }
}
</script>

<style>

</style>