Rumah hujung hadapan web tutorial js 如何把vue组件发布到npm上

如何把vue组件发布到npm上

Jun 23, 2018 pm 02:50 PM
npm komponen vue

给大家讲解一下vue组件发布到npm简单方法和步骤过程,需要的朋友一起学习参考一下。

1.0 新建项目

1.1 初始化项目
输入npm init,之后需要填什么就写什么

新建src目录,并在src目录下新建alert.vue

$ npm init
$ mkdir src
$ cd src
$ touch alert.vue
Salin selepas log masuk

最后的目录结构

1.2 修改入口文件

打开package.json,并修改

1.3 写组件内容

这个组件内容可以随便写,我们就先测试一下,我是这样写的

<template>
  <p class="alert">
    <p>dddddd</p>
  </p>
</template>

<style>
  .alert {
    color: red;
  }
</style>

<script>

export default {
  name:&#39;vue-x-alert&#39;
}

</script>
Salin selepas log masuk

2.0 注册npm

打开npm官网,注册,并记住注册的账号和密码,npm-url

2.1 登录npm,并发布

$ npm login // 登录
$ npm publish
Salin selepas log masuk

2.3 打开npm,看我们刚刚发布的组件

然后我们要在项目中使用到这个组件,进行npm安装,导入就可以使用了

更新包

修改package.json

"version": "1.1.0",

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在jQuery中如何实现下拉菜单

在vue中如何使用路由参数传递

在AngularJs中如何使用双向绑定

如何实现面包屑导航功能

Atas ialah kandungan terperinci 如何把vue组件发布到npm上. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial Java
1659
14
Tutorial PHP
1257
29
Tutorial C#
1231
24
Pengurus pakej JavaScript dibandingkan: Npm vs Yarn vs Pnpm Pengurus pakej JavaScript dibandingkan: Npm vs Yarn vs Pnpm Aug 09, 2022 pm 04:22 PM

Artikel ini akan membawa anda melalui tiga pengurus pakej JavaScript (npm, yarn, pnpm), membandingkan ketiga-tiga pengurus pakej ini dan bercakap tentang perbezaan dan hubungan antara npm, yarn dan pnpm Saya harap ia akan membantu semua orang bantuan, jika anda mempunyai sebarang soalan sila tunjukkan!

Apakah yang perlu saya lakukan jika saya mendapat ralat semasa memasang npm react? Apakah yang perlu saya lakukan jika saya mendapat ralat semasa memasang npm react? Dec 27, 2022 am 11:25 AM

Penyelesaian kepada ralat pemasangan npm react: 1. Buka fail "package.json" dalam projek dan cari objek dependencies 2. Alihkan "react.json" ke "devDependencies" 3. Jalankan "audit npm dalam terminal -- pengeluaran" untuk menetapkan amaran.

Satu artikel menganalisis package.json dan package-lock.json Satu artikel menganalisis package.json dan package-lock.json Sep 01, 2022 pm 08:02 PM

Artikel ini akan memberi anda penjelasan terperinci tentang fail package.json dan package-lock.json saya harap ia akan membantu anda!

Apa yang perlu dilakukan jika npm nod gyp gagal Apa yang perlu dilakukan jika npm nod gyp gagal Dec 29, 2022 pm 02:42 PM

npm node gyp gagal kerana versi "node-gyp.js" dan "Node.js" tidak sepadan Penyelesaiannya: 1. Kosongkan cache nod melalui "npm cache clean -f" 2. Melalui "npm install -. g n" Pasang modul n; 3. Pasang versi "nod v12.21.0" melalui arahan "n v12.21.0".

Apakah yang perlu saya lakukan jika nod tidak boleh menggunakan arahan npm? Apakah yang perlu saya lakukan jika nod tidak boleh menggunakan arahan npm? Feb 08, 2023 am 10:09 AM

Sebab mengapa nod tidak boleh menggunakan arahan npm adalah kerana pembolehubah persekitaran tidak dikonfigurasikan dengan betul Penyelesaiannya ialah: 1. Buka "Sistem Sifat"; 2. Cari "Pembolehubah Persekitaran" -> "Pembolehubah Sistem", dan kemudian edit persekitaran. pembolehubah; 3. Cari lokasi folder nodejs;

Mari kita bincangkan tentang konfigurasi npm cermin domestik (cermin Taobao) Mari kita bincangkan tentang konfigurasi npm cermin domestik (cermin Taobao) Aug 09, 2022 pm 12:06 PM

npm ialah alat pengurusan pakej untuk perpustakaan node.js Oleh kerana alamat cermin berada di luar negara, pemasangan perpustakaan akan menjadi perlahan Anda boleh menukar alamat cermin ke alamat domestik (cermin Taobao) untuk meningkatkan kelajuan pemasangan perpustakaan.

Komunikasi komponen Vue: gunakan $destroy untuk komunikasi pemusnahan komponen Komunikasi komponen Vue: gunakan $destroy untuk komunikasi pemusnahan komponen Jul 09, 2023 pm 07:52 PM

Komunikasi komponen Vue: Gunakan $destroy untuk komunikasi pemusnahan komponen Dalam pembangunan Vue, komunikasi komponen merupakan aspek yang sangat penting. Vue menyediakan pelbagai cara untuk melaksanakan komunikasi komponen, seperti props, emit, vuex, dsb. Artikel ini akan memperkenalkan satu lagi kaedah komunikasi komponen: menggunakan $destroy untuk komunikasi pemusnahan komponen. Dalam Vue, setiap komponen mempunyai kitaran hayat, yang merangkumi satu siri fungsi cangkuk kitaran hayat. Pemusnahan komponen juga merupakan salah satu daripadanya Vue menyediakan $de

Artikel ini akan membantu anda memahami prinsip npm Artikel ini akan membantu anda memahami prinsip npm Aug 09, 2022 am 09:23 AM

npm ialah alat pengurusan pakej dunia JavaScript dan merupakan alat pengurusan pakej lalai untuk platform Node.js. Melalui npm, anda boleh memasang, berkongsi, mengedarkan kod dan mengurus kebergantungan projek. Artikel ini akan membawa anda melalui prinsip npm, saya harap ia akan membantu anda!

See all articles