vue组件发布到npm简单步骤


Posted in Javascript onNovember 30, 2017

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",

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

Javascript 相关文章推荐
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
25个好玩的JavaScript小游戏分享
Apr 22 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
Jul 01 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
jquery对所有input type=text的控件赋值实现方法
Dec 02 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
Bootstrap组合上、下拉框简单实现代码
Mar 06 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
vue filters的使用详解
Jun 11 Javascript
vuex如何重置所有state(可定制)
Jan 17 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 #jQuery
vue 添加vux的代码讲解
Nov 30 #Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 #Javascript
Vue+Vux项目实践完整代码
Nov 30 #Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 #Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 #Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 #Javascript
You might like
php中显示数组与对象的实现代码
2011/04/18 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
PHP实现验证码校验功能
2017/11/16 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
2015/04/12 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
Vue实现剪切板图片压缩功能
2020/02/04 Javascript
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python查询mysql,返回json的实例
2018/03/26 Python
详解flask入门模板引擎
2018/07/18 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
python循环嵌套的多种使用方法解析
2019/11/29 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
python 解决函数返回return的问题
2020/12/05 Python
CSS3 transition 实现通知消息轮播条
2020/10/14 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
美发活动策划书
2014/01/14 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
2015年工会工作总结
2015/03/30 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis