npm publie la bibliothèque de composants personnalisés vue3
Créer un projet
vue create test-ui
Composant personnalisé
Créez un composant personnalisé. Le nom du composant est basé sur vos besoins. Il est préférable d'avoir un composant par dossier. L'image ci-dessous est mon exemple.
Le composant src/components
est le même que lorsque vous écrivez une page. Les soi-disant composants sont pratiques et pratiques. Vous n'avez pas besoin de déplacer la page à plusieurs reprises vers différents projets. Vous pouvez l'installer directement dans votre projet local. Le l'image ci-dessous est un exemple.
Après avoir écrit le composant, vous pouvez tester s'il peut être utilisé normalement dans App.vue
Prêt pour la sortie
Encapsulation des composants
Créez un nouveau fichier index.js dans le répertoire des composants et écrivez-y les composants que vous souhaitez publier.
Configuration de l'emballage des composants
Modifiez le fichier package.json et configurez la commande d'empaquetage
–target lib password pour spécifier le répertoire d'empaquetage
–name le nom du fichier empaqueté
–dest le nom du dossier empaqueté
Commencez à faire vos valises
Exécuter la commande d'empaquetage
npm run package
Une fois l'empaquetage terminé, il y aura un dossier cjulyUI supplémentaire dans le répertoire du projet, qui stocke les fichiers empaquetés.
Initialisez le package.json du package
Entrez dans le répertoire du package et exécutez la commande d'initialisation. Après l'exécution, un fichier package.json sera généré sous le package.
cd .\cjulyUI\
npm init -y
Définir le nom de la bibliothèque de composants à publier
Modifiez la valeur name dans le fichier package.json nouvellement généré sous le package. Cette valeur est le nom de la bibliothèque de composants à publier. N'oubliez pas que personne n'a publié le nom de la bibliothèque de composants dans npm, sinon elle ne peut pas être publiée.
https://www.npmjs.com/
Enregistrez un compte npm
https://www.npmjs.com/signup
Connectez-vous localement après l'inscription
# 切换到npm地址
npm config set registry=https://registry.npmjs.org
# 登录，然后输入你的账号，密码，邮箱及验证码
npm login
Publier et utiliser
libérer
Exécutez la commande de publication dans le répertoire packagé
npm publish
utiliser
Installez-le et introduisez-le dans le projet pour lequel vous souhaitez utiliser cette bibliothèque de composants
Installer la bibliothèque de composants
npm install cjuly-ui
Introduit globalement dans main.js
# vue2引入
import cjuly-ui from 'cjuly-ui'
Vue.use(cjuly-ui);
# vue3引入
import cjuly-ui from 'cjuly-ui'
createApp(App).use(cjuly-ui).mount('#app')
Utilisez-le simplement directement comme élément
Mettre à jour la bibliothèque de composants
Dans le répertoire package du projet de bibliothèque de composants , exécutez la commande suivante :
npm version patch
npm publish