vue组件发布到npm简单步骤
更新时间：2017年11月30日 15:54:54 投稿：laozhang
给大家讲解一下vue组件发布到npm简单方法和步骤过程，需要的朋友一起学习参考一下。
1.0 新建项目
1.1 初始化项目
输入npm init，之后需要填什么就写什么
新建src目录，并在src目录下新建alert.vue
$ npm init $ mkdir src $ cd src $ touch alert.vue
最后的目录结构
1.2 修改入口文件
打开package.json，并修改
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
2.3 打开npm，看我们刚刚发布的组件
然后我们要在项目中使用到这个组件，进行npm安装，导入就可以使用了
更新包
修改package.json
"version": "1.1.0",
然后重新发布一下，就可以了
相关文章
这篇文章主要介绍了完美解决通过IP地址访问VUE项目的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
React/vue开发报错TypeError:this.getOptions is not a function
这篇文章主要给大家介绍了关于React/vue开发报错TypeError:this.getOptions is not a function的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
今天小编就为大家分享一篇在vue中阻止浏览器后退的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue的虚拟DOM使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-09-09
这篇文章主要介绍了Elementui如何限制el-input框输入小数点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
使用vue深度选择器修改ElementUI组件内样式的示例代码
在带有scoped属性的style中书写样式时，无法作用影响到子组件中的样式，此时我们会使用到deep深度选择器，来解决此问题，我们在使用less预处理器，能正常使用，但是在scss预处理器中会报错，下面通过本文介绍vue深度选择器修改ElementUI组件内样式,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue3自定义hooks/可组合函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue router动态路由下让每个子路由都是独立组件的解决方案
这篇文章主要介绍了vue router动态路由下让每个子路由都是独立组件的解决方案,非常不错，具有参考借鉴价值，需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Vue+element自定义指令如何实现表格横向拖拽，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue轻松实现水印效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论