vue如何自定义插件并上传到npm上

杨柒柒
469 阅读2分钟

插件与组件

  • 组件
    • 对某功能或某模块的封装（如alert, loading）
  • 插件
    • 对一系列组件的封装（如vuex，vue-router）
    • 可以用到其他项目中
  • 关系
    • 插件可以封装组件，组件暴露数据给插件

插件的优点

  1. 开箱即用
  2. 功能比组件更强大，更丰富
  3. 一次引入，终身受益
  4. 打包带走，随走随用，（把某个项目中自己的组件用到其他项目中）

插件分类

插件通常用来为 Vue 添加全局功能，分为如下几种

  • 添加全局方法或属性mixin
  • 添加全局资源：指令/过滤器/过渡等directives
  • 添加Vue实例方法，通过把它们添加到Vue.prototype上实现

开发插件

开发的插件其实导出是一个对象，这个对象里面一定要包含install方法，这个方法可以拿到Vue构造函数，里面进行逻辑处理 需求背景：只想要一个弹窗功能，如果引入elementui等组件库，太冗余

  • 插件是基于组件的，第一步新建一个组件
  • 应用
  • 写好插件的原则
    • 以默认配置为优先，以用户配置为覆盖
// 同级，是否查找子集， 匹配 
const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {        
    // 是否注册过  
    if (install.installed) return  
    install.installed 
    Vue.prototype.$msg = '全局的属性' 
    Vue.prototype.$myMethods = function () {  
        console.log('全局自定义的方法')    
    } 
    // 拿到文件进行循环，注册全局的组件
    requireComponent.keys().forEach(fileName => { 
        // 第i个      
        const config = requireComponent(fileName) 
        // 组件名
        const componentName = config.default.name
        Vue.component(componentName, config.default || config) 
    })  
}                  
// 判断是否在浏览器环境中 
// 确保是正常环境   
if (typeof Window !== 'undefined' && window.Vue) { 
    install(window.Vue)
 }  
 
 export default { 
     install  
 }

上传到npm上

  1. 修改 package.json 文件
// name 不能和npm官网上已有插件相同
"name": "vue-zplugin",
// 添加描述
"description": "这个插件的功能",
// 上传到npm上，这个包不能是私有
"private": false,
// 增加开源协议
"license": "MIT",
// "scripts"增加打包命令
"scripts": {
    "lib": "webpack --display-error-details --config build/webpack.lib.conf.js",   
}
  1. 打包

npm run lib

  1. 打包后在package.json文件中加上入口文件
// 入口文件(打包后修改)
"main": "lib/vue-zplugin.umd.min.js"

  1. 发布到webpack上

    1. 创建npm账户

    2. 输入命令npm login，按照提示输入用户名，密码和邮箱

      • 此时可能会有409报错
      • 解决方案：npm config set registry registry.npmjs.org/（注：若是公司插件，应改为内网源，而不要上传到公共npm上）

    3. npm publish

使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

// 调用 `MyPlugin.install(Vue)` 
Vue.use(MyPlugin[, options]) 
new Vue({
    // ...组件选项
})
avatar
文章
阅读
粉丝