En tant qu'ingénieurs de première ligne, nous n'avons pas besoin de faire nos propres roues,Utiliser directement les bibliothèques de composants existantes.Mais il peut y avoir des circonstances particulières,Nous aimerions avoir une personnalisationuiComponents.Je l'utilise ici.vueFaire une basebuttonComposants et publication ànpm,Puis essayez d'utiliser ceciuiComponents.

Préparation préalable

vue-cli3

npmNuméro de compte, mot de passe（npmAdresse officielle）

Créer un projet

Mise en œuvrevue create button-ui Sélection manuelle du module de fonctionManually select features

*Style de code--》 ESLint + Standard config
* Détection de format --》 Lint on Save
* Mode de génération du profil --》 In package.json
* Enregistrer la préconfiguration --》Non

Créer une structure de répertoire

* Créer un packages Le répertoire est utilisé pour stocker les UIComponents;

* Créer un localTable des matières, Utilisé pour tester des références à des UI Effets des composants . 

* Parce que nous avons changé la structure du Répertoire du projet original , Faire fonctionner le système localement et emballer pour ne pas trouver le répertoire correspondant , Nous devons créer un vue.config.js Modifier manuellement le dossier webpackConfiguration, Faire fonctionner et emballer le système localement .

\

Composants de fabrication

    ①Inpackages Créer deux nouveaux dossiers dans le dossier button,fontsEt unindex.jsDocumentation. Éditionpackages/index.js

    ②button Nouveau dans le dossier index.js Pour exporter des composants \

   ③Éditionpackages/button/src/button.vue

    ④Puis créer un nouveausrcDossiers,Pose ça.button C'est un composant normal vueDocumentation, Des attributs sont continuellement ajoutés pour affiner ce composant .

button type

Les types courants sont：primary / success / warning / danger / info / text

Nous prenons la forme d'un tableau de liens de type dynamique

Ajouter un filet

Exécuter le projet

         Le local s'est enfui ,Regardez l'effet.. Parfait avant local Contenu du dossier ,NouveauApp.vue,man.js,TestButton.vueTrois fichiers.App.vueDetestButtonIntroduit dansMcButton Composants et présentation main.js C'est le fichier d'entrée . Après l'introduction de packages Après la Bibliothèque de composants pour ,TestButton.vuePeut être utilisé directementmc-button. En coursnpm run serve Après cela, ouvrez la page pour voir les composants personnalisés à l'extérieur sont prêts à être utilisés dans le projet .

Emballez

Connexion locale npm Numéro de compte et publication .

Attention：

• Télécharger surnpmTemps écoulé,Pour mettrepackage.jsonDansprivatePropriété modifiée enfalse

• Lors de l'itération du paquet ,À modifierpackage.json Le numéro de version de , Exécuter à nouveau la commande de publication

Validation npm Sac

• Après la publication du projet , Reconstruire un  vue Projets
• En cours npm install  Il faudra en installer un autre après  npm Sac, Exécution npm install Nom du paquet -S
• npm  Après l'installation du paquet ,In main.js  Ajout d'une référence au paquet

Résumé du problème

Raisons：Componentsexport Pas d'exportation name Ça vaut le coup.

Solutions：AjouternameNom du composant

———————————————————————————————————————

———————————————————————————————————————

———————————————————————————————————————

Raisons：scss-loader Version trop élevée

Solutions： Désinstaller installer une version basse est tout ce que

Raisons：EslintErreur signalée

Solutions：vue.config.jsAjouterlintOnSave:false

Article de référence：

vueRéaliser sa propreuiComposants et publication ànpm\

Construisez votre propre vue Bibliothèque de composants（Trois）\

Comment faire vue Component and published as npmSac