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 遍历对象中的子对象
Jul 03 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
JavaScript中变量提升 Hoisting
Jul 03 Javascript
JavaScript基础知识之数据类型
Aug 06 Javascript
JS实现简单的Canvas画图实例
Jul 04 Javascript
详解JavaScript设计模式开发中的桥接模式使用
May 18 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
Jun 18 jQuery
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
在vue中获取wangeditor的html和text的操作
Oct 23 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 高效率写法 推荐
2010/02/21 PHP
PHP生成短网址方法汇总
2016/07/12 PHP
thinkPHP框架RBAC实现原理分析
2019/02/01 PHP
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
jQuery的deferred对象使用详解
2011/08/20 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
使用node.JS中的url模块解析URL信息
2020/02/06 Javascript
微信小程序复选框实现多选一功能过程解析
2020/02/14 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python中的getopt函数使用详解
2015/07/28 Python
Python smtplib实现发送邮件功能
2018/05/22 Python
HTML的form表单和django的form表单
2019/07/25 Python
利用anaconda作为python的依赖库管理方法
2019/08/13 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python autoescape标签用法解析
2020/01/17 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
HTML5实现一个能够移动的小坦克示例代码
2013/09/02 HTML / CSS
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
编写strcpy函数
2014/06/24 面试题
自荐信要包含哪些内容
2013/11/06 职场文书
初三物理教学反思
2014/01/21 职场文书
校园联欢晚会主持词
2014/03/17 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
充分就业社区汇报材料
2014/05/07 职场文书
委托培训协议书
2014/11/17 职场文书
给老师的一封感谢信
2015/01/20 职场文书
新入职员工工作总结
2015/10/15 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers