npm publie la bibliothèque de composants personnalisés vue3 - Méthode 2

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 La figure suivante est un exemple de composant.

Après avoir écrit le composant, vous pouvez tester s'il peut être utilisé normalement dans App.vue

publier la configuration

Composant de registre

Créez un nouveau fichier index.js dans le répertoire des composants et écrivez-y les composants que vous souhaitez publier.

Modifier le fichier vue.config.js

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  pages: {
    
    
    index: {
    
    
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
})

Modifier le fichier package.json et configurer les commandes d'empaquetage et les informations sur la bibliothèque de composants

Commande d'empaquetage :
–target lib mot-clé spécifie le répertoire pour l'empaquetage
–name le nom du fichier empaqueté
–dest le nom du dossier empaqueté

"lib": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --target lib --name cjuly-ui --dest lib ./src/components/index.js"

Informations sur les composants :

name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。

Remarque : N'oubliez pas que personne n'a publié le nom du package de la bibliothèque de composants sur npm, sinon il ne peut pas être publié. Vous pouvez accéder au site officiel de npm pour vérifier si quelqu'un a publié le même nom.
https://www.npmjs.com/

Définir les fichiers ignorés

Créez un fichier .npmignore dans le répertoire src et définissez le fichier sur ignorer. La syntaxe de ce fichier est la même que celle de .gitignore. Définissez les répertoires ou fichiers à ignorer lors de la publication sur npm.

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
jsconfig.json
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

Commencez à faire vos valises

Exécuter la commande d'empaquetage

npm run lib

Une fois l'empaquetage terminé, il y aura un dossier lib supplémentaire dans le répertoire du projet, qui stocke les fichiers empaquetés.

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écuter la commande de libération

npm publish

utiliser

Installez-le et introduisez-le dans le projet pour lequel vous souhaitez utiliser cette bibliothèque de composants

Installez la bibliothèque de composants. Si le composant est mis à jour, réexécutez cette commande.

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

Si votre composant est modifié, vous devez le mettre à jour dans le répertoire packagé
npm dans le projet de bibliothèque de composants et exécuter la commande suivante :

npm run lib
npm version patch
npm publish

Une erreur peut être signalée lors du correctif de version npm. Exécutez simplement la commande suivante, puis réexécutez la commande de mise à jour de version ci-dessus.

git add .
git commit -m "publish to npm"

Remarque : après la publication, il est préférable de redéfinir l'adresse npm sur le miroir Taobao, puis de passer à l'adresse npm lors de la nouvelle publication.

# npm发布地址
npm config set registry=https://registry.npmjs.org
# npm淘宝镜像
npm config set registry https://registry.npm.taobao.org/