я учусь vuejs, и я использую его последние версии, такие как vue / cli версии 4.xx, и теперь я хочу выполнить задачу, такую как:
- Мне нужно создать простой заголовок с использованием vue / cli версии 4.xx, который будет принимать массив внутри переменной headers в качестве реквизита.
Теперь я хочу опубликовать sh поверх npm.
- Далее я создам еще один vue проект, который будет использовать машинописный текст и стиль, основанный на классе, и использую мой пакет npm, созданный на втором этапе этого проекта.
Я следовал нескольким статьям, чтобы завершить этот подход. ссылка на которую упоминается ниже Как создать и опубликовать sh a Vuejs компонент на NPM
Еще одна статья такая: https://dev.to/amroessam/publish-your-first-npm-package-vue-263h
Последняя статья такова: https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html
Хотя я могу создать заголовок и опубликовать sh над npm, но я не могу его использовать Пакет npm вообще выдает ошибку.
Эта зависимость не найдена:
- header-bell-app in ./node_modules/cache- погрузчик / расстояние / cjs 1083 * ?? исх -.! 12-0 ./ node_modules / столпотворение-погрузчик / Библиотека ./ node_modules / кэш-погрузчик / расстояние / cjs!. js ?? иого -!.? 0-0 ./ node_modules / vue -loader / Lib ?? vue -loader-опция ./ SRC / компоненты / UserComponent / UserComponent vue вя & типа = сценарий и языки = 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, если он существует, или добавьте новый файл декларации (.d.ts), содержащий `Declare module 'header-bell';
и ошибка в консоли при использовании HeaderComponent приведена на рисунке ниже
Надеюсь, этого будет достаточно, чтобы исправить мои вещи. Я буду благодарен, если вы можете предоставить мне лучшее решение для этого.