1

我正在学习 vuejs，我正在使用它的最新版本，比如 vue/cli 4.xx 版，现在我想执行一个任务，比如：

  1. 我需要使用 vue/cli 4.xx 版创建一个简单的标头，它将在标头变量中使用一个数组作为道具。

  2. 现在，我想通过 npm 发布它。

    1. 接下来，我将创建另一个 vue 项目，该项目将使用 typescript 并作为基于类的样式，并在该项目的第二步中使用我的 npm 包创建。

我遵循了几篇文章来完成这种方法。下面提到了其中的链接 如何在 NPM 上创建和发布 Vuejs 组件

另一篇文章是这样的：https ://dev.to/amroessam/publish-your-first-npm-package-vue-263h

上一篇文章是这样的：https ://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html

即使我能够创建标头并通过 npm 发布它，但我根本无法使用该 npm 包它给出了错误。

未找到此依赖项：

  • ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs 中的 header-bell-app。 js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/UserComponent/UserComponent.vue?vue&type=script&lang=js&

要安装它，您可以运行： npm install --save header-bell-app

我创建了名为 header-bell-app 的头包并安装了它，但是当我尝试将它导入某个地方时它仍然给我错误。

下面是在这张图片中，我有代码的结构我的 header-bell npm 包的代码和截图：

    entry.js
import component from "./headerComponent.vue";

function install(Vue) {
  if (install.installed) return;
  install.installed = true;
  Vue.component("header-component", component);
}

const plugin = {
  install
};

let GlobalVue = null;
if (typeof window !== "undefined") {
  GlobalVue = window.Vue;
} else if (typeof global !== "undefined") {
  GlobalVue = global.vue;
}

if (GlobalVue) {
  GlobalVue.use(plugin);
}

component.install = install;

export default component;




HeaderComponent.vue

<template>
  <div>
    <div class="header">
      <div class="header-right">
        <a v-for="header in headers" v-bind:key="header.id" v-bind:href="header.url">{{header.name}}</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "HeaderComponent",
  props: {
    headers: []
  },
  mounted() {}
};
</script>
<style scoped>
/* Style the header with a grey background and some padding */
.header {
  overflow: hidden;
  background-color: #f1f1f1;
  padding: 20px 10px;
}

/* Style the header links */
.header a {
  float: left;
  color: black;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  line-height: 25px;
  border-radius: 4px;
}

/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */
.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

/* Change the background color on mouse-over */
.header a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active/current link*/
.header a.active {
  background-color: dodgerblue;
  color: white;
}

/* Float the link section to the right */
.header-right {
  float: right;
}

/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */
@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  .header-right {
    float: none;
  }
}
</style>




rollup.config.js

import vue from "rollup-plugin-vue";
import buble from "rollup-plugin-buble";
import commonjs from "rollup-plugin-commonjs";

export default {
  input: 'src/entry.js', // Path relative to package.json
  output: {
      name: 'HeaderComponent',
      exports: 'named',
  },
  plugins: [
      commonjs(),
      vue({
          css: true, // Dynamically inject css as a <style> tag
          compileTemplate: true, // Explicitly convert template to render function
      }),
      buble(), // Transpile to ES5
  ],
};



package.json

{
  "name": "header-bell",
  "version": "0.1.2",
  "main": "dist/headercomponent.umd.js",
  "module": "dist/headercomponent.esm.js",
  "unpkg": "dist/headercomponent.min.js",
  "browser": {
    "./sfc": "src/HeaderComponent.vue"
  },
  "files": [
    "dist/*",
    "src/*",
    "attributes.json",
    "tags.json"
  ],
  "vetur": {
    "tags": "tags.json",
    "attributes": "attributes.json"
  },
  "scripts": {
    "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
    "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/headercomponent.umd.js",
    "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/headercomponent.esm.js",
    "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/headercomponent.min.js"
  },
  "devDependencies": {
    "cross-env": "^5.2.0",
    "minimist": "^1.2.0",
    "rollup": "^1.14.4",
    "rollup-plugin-buble": "^0.19.6",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-replace": "^2.2.0",
    "rollup-plugin-uglify-es": "0.0.1",
    "rollup-plugin-vue": "^4.7.2",
    "vue": "^2.6.10",
    "vue-template-compiler": "^2.6.10"
  }
}

我在安装 header-bell 后在我的另一个项目中使用上面的包，如下所示

在此处输入图像描述

现在它给了我一个错误

找不到模块“header-bell”的声明文件。'd:/Alok/Work/References/interceptor-boilerplate/node_modules/header-bell/dist/headercomponent.umd.js' 隐含了一个 'any' 类型。尝试npm install @types/header-bell它是否存在或添加一个包含 `declare module 'header-bell' 的新声明 (.d.ts) 文件；

使用 HeaderComponent 时控制台中的错误如下图所示

在此处输入图像描述

我希望这将是足够的证据来纠正我的事情。如果您能为此提供最佳解决方案，我将不胜感激。

4

0 回答 0