Maison interface Web js tutoriel Comment publier des composants vue sur npm

Comment publier des composants vue sur npm

Jun 23, 2018 pm 02:50 PM
npm vue组件

Laissez-moi vous expliquer la méthode simple et le processus par étapes de publication des composants vue sur npm. Les amis qui en ont besoin peuvent l'apprendre et s'y référer ensemble.

1.0 Créer un nouveau projet

1.1 Initialiser le projet
Entrez npm init, puis remplissez ce dont vous avez besoin

Créez un nouveau répertoire src et créez un nouvelle alerte dans le répertoire src vue

$ npm init
$ mkdir src
$ cd src
$ touch alert.vue
Copier après la connexion

Structure finale du répertoire

1.2 Modifier le fichier d'entrée

Ouvrez le package .json et modifiez

1.3 Écrire le contenu du composant

Vous pouvez écrire le contenu de ce composant comme vous le souhaitez, commençons testez-le d'abord, voici comment je l'ai écrit

<template>
  <p class="alert">
    <p>dddddd</p>
  </p>
</template>

<style>
  .alert {
    color: red;
  }
</style>

<script>

export default {
  name:&#39;vue-x-alert&#39;
}

</script>
Copier après la connexion

2.0 Enregistrez-vous npm

Ouvrez le site officiel de npm, inscrivez-vous et mémorisez le compte et le mot de passe enregistrés, npm-url

2.1 Connectez-vous à npm et publiez

$ npm login // 登录
$ npm publish
Copier après la connexion

2.3 Ouvrez npm et regardez le composant que nous venons de publier

Ensuite, nous voulons utiliser ce composant dans le projet, effectuer l'installation de npm et l'importer pour utiliser

Mettre à jour le package

Modifier le package.json

"version": "1.1.0",

ci-dessus, je l'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter le menu déroulant dans jQuery

Comment utiliser le passage des paramètres de route dans vue

Comment utiliser la liaison bidirectionnelle dans AngularJs

Comment implémenter la fonction de navigation dans le fil d'Ariane

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que faire si une erreur d'installation de npm React se produit Que faire si une erreur d'installation de npm React se produit Dec 27, 2022 am 11:25 AM

Solution à l'erreur d'installation de npm React : 1. Ouvrez le fichier "package.json" dans le projet et recherchez l'objet de dépendances ; 2. Déplacez "react.json" vers "devDependencies" ; 3. Exécutez "npm audit dans le terminal -- production" pour corriger l'avertissement.

Comparaison des gestionnaires de packages JavaScript : Npm vs Yarn vs Pnpm Comparaison des gestionnaires de packages JavaScript : Npm vs Yarn vs Pnpm Aug 09, 2022 pm 04:22 PM

Cet article vous présentera les trois gestionnaires de packages JavaScript (npm, fil, pnpm), comparera ces trois gestionnaires de packages et parlera des différences et des relations entre npm, fil et pnpm. J'espère que cela sera utile à tout le monde, s'il vous plaît. aidez-moi, si vous avez des questions, n'hésitez pas à les signaler !

Un article analysant package.json et package-lock.json Un article analysant package.json et package-lock.json Sep 01, 2022 pm 08:02 PM

Cet article vous donnera une explication détaillée des fichiers package.json et package-lock.json. J'espère qu'il vous sera utile !

Que dois-je faire si le nœud ne peut pas utiliser la commande npm ? Que dois-je faire si le nœud ne peut pas utiliser la commande npm ? Feb 08, 2023 am 10:09 AM

La raison pour laquelle le nœud ne peut pas utiliser la commande npm est que les variables d'environnement ne sont pas configurées correctement. La solution est la suivante : 1. Ouvrez "Propriétés système" ; 2. Recherchez "Variables d'environnement" -> "Variables système", puis modifiez l'environnement. variables ; 3. Recherchez l'emplacement du dossier nodejs ; 4. Cliquez sur "OK".

Parlons de la configuration npm des miroirs domestiques (miroirs Taobao) Parlons de la configuration npm des miroirs domestiques (miroirs Taobao) Aug 09, 2022 pm 12:06 PM

npm est l'outil de gestion des packages pour la bibliothèque node.js. Étant donné que l'adresse du miroir est à l'étranger, l'installation de la bibliothèque sera lente. Vous pouvez remplacer l'adresse du miroir par une adresse nationale (miroir Taobao) pour améliorer la vitesse d'installation. bibliothèque.

Que faire si le nœud npm gyp échoue Que faire si le nœud npm gyp échoue Dec 29, 2022 pm 02:42 PM

npm node gyp a échoué car les versions de « node-gyp.js » et « Node.js » ne correspondaient pas. La solution : 1. Videz le cache du nœud via « npm cache clean -f » 2. Via « npm install - ». g n" Installez le module n ; 3. Installez la version "node v12.21.0" via la commande "n v12.21.0".

Cet article vous aidera à comprendre les principes de npm Cet article vous aidera à comprendre les principes de npm Aug 09, 2022 am 09:23 AM

npm est l'outil de gestion de packages du monde JavaScript et est l'outil de gestion de packages par défaut pour la plateforme Node.js. Grâce à npm, vous pouvez installer, partager, distribuer du code et gérer les dépendances du projet. Cet article vous fera découvrir les principes de npm, j'espère qu'il vous sera utile !

Comment Vue implémente-t-il la réutilisation et l'extension des composants ? Comment Vue implémente-t-il la réutilisation et l'extension des composants ? Jun 27, 2023 am 10:22 AM

Avec le développement continu de la technologie front-end, Vue est devenu l'un des frameworks les plus populaires en matière de développement front-end. Dans Vue, les composants sont l'un des concepts de base, qui peuvent diviser les pages en parties plus petites et plus faciles à gérer, améliorant ainsi l'efficacité du développement et la réutilisabilité du code. Cet article se concentrera sur la façon dont Vue implémente la réutilisation et l'extension des composants. 1. Mixins de réutilisation des composants Vue Les mixins sont un moyen de partager les options de composants dans Vue. Les mixins permettent de combiner les options de composants de plusieurs composants en un seul objet pour un maximum

See all articles