当前位置:主页 > vue.js教程 > vue组件发布到npm简单步骤

vue组件发布到npm的方法

发布:2020-02-19 19:08:21 85


给大家整理了vue相关的编程文章,网友戈雨石根据主题投稿了本篇教程内容,涉及到vue组件、npm、vue组件发布到npm简单步骤相关内容,已被729网友关注,涉猎到的知识点内容可以在下方电子书获得。

vue组件发布到npm简单步骤

1.0 新建项目

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

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

$ npm init
$ mkdir src
$ cd src
$ touch alert.vue

vue组件发布到npm简单步骤

最后的目录结构

vue组件发布到npm简单步骤

1.2 修改入口文件

打开package.json,并修改

vue组件发布到npm简单步骤

1.3 写组件内容

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

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

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

<script>

export default {
  name:'vue-x-alert'
}

</script>

2.0 注册npm

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

2.1 登录npm,并发布

$ npm login // 登录
$ npm publish

vue组件发布到npm简单步骤

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

vue组件发布到npm简单步骤

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

更新包

修改package.json

"version": "1.1.0",

然后重新发布一下,就可以了


相关文章

  • vue组件jsx语法的实例用法

    发布:2019-10-03

    本篇文章主要介绍了vue组件jsx语法的具体使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • Vue.js父与子组件之间传参示例

    发布:2022-06-28

    给大家整理一篇关于Vue.js的教程,本篇文章主要介绍了Vue.js父与子组件之间传参示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • 如何发布一个npm包(基于vue)

    发布:2020-02-11

    这篇文章主要介绍了基于vue如何发布一个npm包的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • 在NPM发布自己造的轮子方法总结

    发布:2019-12-29

    这篇文章主要介绍了在NPM发布自己造的轮子的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • yarn与npm的命令行小结分享

    发布:2020-02-22

    想必最近大家对新的JavaScript包管理工具yarn已经有所耳闻,并已通过npm i -g yarn进行了安装,现在想知道怎么样使用吗?如果你了解 npm,你已经会很大一部分啦!下面是这篇文章从npm切换到yarn的


  • 如何将自己的vue组件发布到npm

    发布:2020-03-12

    本篇文章主要介绍了自定义vue组件发布到npm的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue组件间事件传递实例讲解

    发布:2020-02-25

    最近的工作需要用到vue,所以最近接触最多的就是vue,下面小编给大家介绍下vue组件间事件传递,需要的朋友参考下吧


  • npm 5.0 学习中遇到的坑

    发布:2020-04-06

    最近使用到了npm5.0,第一次使用确实被惊艳了,但随着而来的是一些坑,下面这篇文章主要给大家简单介绍了关于npm 5的一些新坑,需要的朋友可以参考学习,下面来一起看看吧。


网友讨论