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 相关文章推荐
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
Vue数组响应式操作及高阶函数使用代码详解
Aug 01 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输出1000以内质数(素数)示例
2014/02/16 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
JavaScript脚本性能的优化方法
2007/02/02 Javascript
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
JavaScript Event学习第十一章 按键的检测
2010/02/10 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
文本域中换行符的替换示例
2014/03/04 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JS判断两个对象内容是否相等的方法示例
2017/04/10 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
js实现简单的打印表格
2020/01/15 Javascript
js实现带箭头的进度流程
2020/03/26 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
python回调函数的使用方法
2014/01/23 Python
python单线程实现多个定时器示例
2014/03/30 Python
python中二维阵列的变换实例
2014/10/09 Python
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python实现将json文件中向量写入Excel的方法
2018/03/26 Python
python求最大公约数和最小公倍数的简单方法
2020/02/13 Python
python 实现字符串下标的输出功能
2020/02/13 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
XD健身器材:Kevlar球、Crossfit健身球
2019/03/26 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
工程力学专业毕业生求职信
2013/10/06 职场文书
临床医师专业个人自我评价范文
2013/11/07 职场文书
党的群众路线教育实践活动个人整改落实情况汇报
2014/10/28 职场文书
老公婚前保证书
2015/02/28 职场文书