Verwenden Sie die Vue-Komponentenbibliothek, um die Veröffentlichung in npm zu implementieren

In diesem Artikel wird detailliert beschrieben, wie die Vue-Komponentenbibliothek in npm veröffentlicht wird, und Interessierte können sich als Referenz darauf beziehen.

Ich habe einen Satz meiner eigenen Komponentenbibliothek erstellt und auf npm veröffentlicht. Den Projektcode finden Sie unter https://github.com/hamger/hg-vcomponents

Vorläufige Vorbereitung

• Haben Sie ein npm-Konto

• Installieren Sie vue-cli

Erstellen Sie das Projekt

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

Verzeichnisstruktur

- 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
   ...

Der interne Code ist in GitHub detailliert beschrieben. Wenn er für Sie hilfreich ist, geben Sie ihm bitte einen Stern.

Projektkonfiguration

Um das Hochladen des Projekts auf npm zu ermöglichen, müssen einige Stellen konfiguriert werden.

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

Die Dateien im Ordner dist sind zu exportierende Dateien. Entfernen Sie daher dist/ aus der .gitignore-Datei, damit die gepackten Dateien beim Hochladen des Codes aktualisiert werden.

Entwicklung und Produktion

Aufgrund der Konfiguration von webpack.base.conf.js sind Entwicklung und Produktion des Projekts unabhängig voneinander.

Verwenden Sie npm run dev, um die Entwicklungsumgebung aufzurufen, und Sie können die Demo der Komponente zum einfachen Debuggen sehen. Verwenden Sie npm run build, um die Komponentenbibliothek zu packen.

Auf npm veröffentlichen

Wenn Sie bei npm angemeldet sind, geben Sie die Befehlszeile im Stammverzeichnis ein (führen Sie den gleichen Vorgang jedes Mal aus, wenn Sie den Code aktualisieren)

npm version patch
npm publish

Fertig! Jetzt können Sie npm install hg-vconponents verwenden, um die Komponentenbibliothek herunterzuladen, die Sie an anderer Stelle geschrieben haben.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Verwendung des Vue-Cli-Gerüsts zur Initialisierung der Projektstruktur im Rahmen des Vue-Projekts

Vue ist implementiert durch die Kombination von vue-i18n Mehrsprachige Umschaltmethode für Hintergrunddaten

$set und Array-Update-Methode in vue.js_vue.js

Das obige ist der detaillierte Inhalt vonVerwenden Sie die Vue-Komponentenbibliothek, um die Veröffentlichung in npm zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!