Utilisez la bibliothèque de composants Vue pour implémenter la publication sur npm

Cet article présente en détail comment publier la bibliothèque de composants Vue sur npm et partage des exemples de code. Les amis intéressés peuvent s'y référer pour référence.

J'ai créé un ensemble de ma propre bibliothèque de composants et je l'ai publié sur npm. Le code du projet peut être trouvé sur https://github.com/hamger/hg-vcomponents

Préparation préliminaire

• Avoir un compte npm

• Installer vue-cli

Construire le projet

vue init webpack hg-vcomponents
cd hg-vcomponents
cnpm install

Structure du répertoire

- vue-flag-list
  + build
   + dist // 存放发布到npm的代码
   - src
     - components // 存放组件源代码 和 README.md
      - arrows
         arrows.vue
         README.md
       - round
        round.vue
         README.md
      index.js // 组件导出文件
    - examples // 存放组件的 demo
      arrows.vue
       round.vue
       index.vue // 组件 demo 的入口
     - router
       index.js // 引入 examples 下的组件，并配置路由
     App.vue
     main.js
   ...

Pour plus de détails sur le code interne, veuillez consulter GitHub. Si cela vous est utile, veuillez lui attribuer une étoile.

Configuration du projet

Afin de permettre au projet d'être téléchargé sur npm, certains endroits doivent être configurés.

build/webpack.base.conf.js

entry: {
  app: process.env.NODE_ENV === 'production'
   ? './src/components/index.js' // 生产模式下导入文件
   : './src/main.js' // 开发模式下导入文件
},

package.json

"private": false, // 因为组件包是公用的，所以 private 为 false
"main": "dist/hg-vcomponents.min.js", // 导出文件名，即 import 引入的文件

.gitignore

Les fichiers du dossier dist sont des fichiers à exporter, supprimez donc dist/ dans le fichier .gitignore afin que les fichiers packagés soient mis à jour lors du téléchargement du code.

Développement et production

En raison de la configuration de webpack.base.conf.js, le développement et la production du projet sont indépendants.

Utilisez npm run dev pour accéder à l'environnement de développement et vous pourrez voir la démo du composant pour un débogage facile. Utilisez npm run build pour empaqueter la bibliothèque de composants.

Publier sur npm

Lorsque vous êtes connecté à npm, entrez la ligne de commande dans le répertoire racine (effectuez la même opération à chaque fois que vous mettez à jour le code)

npm version patch
npm publish

Fait ! Vous pouvez maintenant utiliser npm install hg-vconponents pour télécharger la bibliothèque de composants que vous avez écrite ailleurs.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée de l'utilisation de l'échafaudage vue-cli pour initialiser la structure du projet sous le projet Vue

Vue est implémenté en combinant la méthode de commutation multilingue vue-i18n pour les données d'arrière-plan

$set et la méthode de mise à jour du tableau dans vue.js_vue.js

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!