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.
vue-cli3
npmNuméro de compte, mot de passe(npmAdresse officielle)
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 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 .
\
①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 .
Les types courants sont:primary / success / warning / danger / info / text
Nous prenons la forme d'un tableau de liens de type dynamique
Le local s'est enfui ,Regardez l'effet.. Parfait avant local Contenu du dossier ,NouveauApp.vue,man.js,TestButton.vueTrois fichiers.App.vue
DetestButtonIntroduit 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 .
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
npm
Sacvue
Projetsnpm 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 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
vueRéaliser sa propreuiComposants et publication ànpm\
Construisez votre propre vue Bibliothèque de composants(Trois)\