自定义指令库中未捕获的TypeError

Question

我已经为工具提示创建了一个自定义目录，我想让它成为一个库，可以导入并在任何其他项目中使用。我已经创建了库，并将其导入到不同的项目中。但是当我运行这个项目时，它返回下面的错误。

Uncaught TypeError: Cannot read property 'install' of undefined
at Function.Vue.use (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:5096)
at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/CommonComponents/WizardComponent.vue?vue&type=script&lang=js&:35)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/CommonComponents/WizardComponent.vue?vue&type=script&lang=js& (app.js:1022)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./src/components/CommonComponents/WizardComponent.vue?vue&type=script&lang=js&:2)
at Module../src/components/CommonComponents/WizardComponent.vue?vue&type=script&lang=js& (app.js:1838)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (webpack-internal:///./src/components/CommonComponents/WizardComponent.vue:3)

我尝试了几种方法来发布自定义指令库，但仍无法修复。如果你能帮我找出问题所在，那将是一个很大的帮助。

我的库代码如下

main.js

export const tooltip= {
  bind: function (el, binding) {
    el.addEventListener('mouseenter', function () {
      var $tooltip = document.createElement('div')
      var $tooltipDimension = el.getBoundingClientRect()
      var $tooltipPopupDimension = $tooltip.getBoundingClientRect()
      $tooltip.setAttribute('class', 'v-tooltip')
      $tooltip.setAttribute('id', 'vTooltip')
      var tooltipObj=binding.value;
      var toolTipValue=null;
      var toolTipDirection=null;
      var toolTipBackgroundColor=null;
      var toolTipTextColor=null;
      var toolTipPadding=null;
      var toolTipBoxShadow=null;
      if(typeof tooltipObj === 'object' && tooltipObj !== null){
        toolTipValue=tooltipObj.value;
         toolTipDirection=tooltipObj.direction;
         toolTipBackgroundColor=tooltipObj.backgroundColor;
         toolTipTextColor=tooltipObj.textColor;
         toolTipPadding=tooltipObj.padding;
         toolTipBoxShadow=tooltipObj.boxShadow;
         
      }
      $tooltip.innerHTML = toolTipValue;
      if(toolTipBackgroundColor!=null){
        $tooltip.style.backgroundColor=toolTipBackgroundColor;
        $tooltip.style.borderColor=toolTipBackgroundColor;
      }
      if(toolTipTextColor!=null){
        $tooltip.style.color=toolTipTextColor;
      }
      if(toolTipPadding!=null){
        $tooltip.style.padding=toolTipPadding;
      }
      if(toolTipBoxShadow!=null){
        $tooltip.style.boxShadow=toolTipBoxShadow;
      }
      document.body.appendChild($tooltip)
      if(toolTipDirection!=null && toolTipDirection=='bottom'){
        $tooltip.classList.add('bottom');
        $tooltip.style.left = $tooltipDimension.left - $tooltip.clientWidth/2 + $tooltipDimension.width/2 + 'px'
        $tooltip.style.top = $tooltipDimension.bottom + 6 + 'px'
      }else if(toolTipDirection!=null && toolTipDirection=='left'){
        $tooltip.classList.add('left');
        $tooltip.style.left = $tooltipDimension.left - $tooltip.clientWidth - 6 + 'px'
        $tooltip.style.top = $tooltipDimension.top + 'px'
      }else if(toolTipDirection!=null && toolTipDirection=='right'){
        $tooltip.classList.add('right');
        $tooltip.style.left = $tooltipDimension.left +  $tooltipDimension.width + 6 + 'px'
        $tooltip.style.top = $tooltipDimension.top + 'px'
      }else{
        $tooltip.classList.add('top');
      $tooltip.style.left = $tooltipDimension.left - $tooltip.clientWidth/2 + $tooltipDimension.width/2 + 'px'
      $tooltip.style.top = $tooltipDimension.top - $tooltip.clientHeight + 'px'
    }
      
    
      fadeIn($tooltip)
    })
    el.addEventListener('mouseleave', function () {
      var elemToRemove = document.getElementById('vTooltip')
      fadeOut(elemToRemove)
      elemToRemove.parentNode.removeChild(elemToRemove)
    })
  }
}


function fadeOut(el){
  el.style.opacity = 1;

  (function fade() {
    if ((el.style.opacity -= .1) < 0) {
      el.style.display = "none";
    } else {
      requestAnimationFrame(fade);
    }
  })();
}

function fadeIn(el, display){
  el.style.opacity = 0;
  el.style.display = display || "block";

  (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
      el.style.opacity = val;
      requestAnimationFrame(fade);
    }
  })();
}

index.js

import './scss/tooltip.scss';
import tooltip from './main.js';

Vue.directive('tooltip', tooltip);

这是包json文件，我在其中编写了构建库的代码行

package.json

{
  "name": "v-lib-tooltip-component",
  "version": "0.0.6",
  "private": false,
  "main":"./dist/ToolTipComponent.common.js",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "build-lib": "vue-cli-service build --target lib --name ToolTipComponent ./src/main.js",
    "npm-publish": "npm publish --access public",
    "yarn-publish": "yarn publish"
  },
  "files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ],
  "dependencies": {
    "core-js": "^3.6.5",
    "css-loader": "^5.2.4",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.1",
    "vue": "^2.6.11",
    "vue-router": "^3.5.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

当我在另一个项目中使用上面的库时。这是我在vue文件中使用的方法。

test.vue

import Vue from "vue";
import {VisitToolTip} from 'visit-lib-tooltip-component';
Vue.use(VisitToolTip);

Answer 1

main.js具有需要在index.js中导入的命名导出tooltip

import { tooltip } from './main'

一个Vue插件必须导出一个install函数，所以你的index.js应该是：

export default {
  install(Vue) {
    Vue.directive('tooltip', tooltip)
  }
}

您的build-lib命令应该针对插件代码所在的index.js：

{
  "scripts": {
    "build-lib": "vue-cli-service build --target lib --name ToolTipComponent ./src/index.js",
  }
}

最后，工具提示插件没有使用命名导出，所以在应用程序中导入插件时只需使用默认导入：

// src/main.js (application project)
import VisitToolTip from 'visit-lib-tooltip-component';
Vue.use(VisitToolTip);