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_01_理解内存分配原理分析
Oct 11 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
js实现Select下拉框具有输入功能的方法
Feb 06 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
Jun 15 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
vue组件间通信子与父详解(二)
Nov 07 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
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
兼容各大浏览器带关闭按钮的漂浮多组图片广告代码
2014/06/05 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
PHP设计模式之命令模式示例详解
2020/12/20 PHP
javascript无刷新评论实现方法
2015/05/13 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
JS对象与json字符串相互转换实现方法示例
2018/06/14 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
python实现简单ftp客户端的方法
2015/06/28 Python
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python使用reportlab模块生成PDF格式的文档
2019/03/11 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
利用python对mysql表做全局模糊搜索并分页实例
2020/07/12 Python
实例代码讲解Python 线程池
2020/08/24 Python
使用Python操作MySQL的小技巧
2020/09/10 Python
全球知名提供各类营养保健品的零售商:Vitamin Shoppe
2016/10/09 全球购物
阿里云:Aliyun.com
2017/02/15 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
北承题目(C++)
2012/05/16 面试题
什么是事务?为什么需要事务?
2012/01/09 面试题
建筑施工员岗位职责
2013/11/26 职场文书
爱与责任演讲稿
2014/05/20 职场文书
大学生毕业求职信
2014/06/12 职场文书
学校党的群众路线教育实践活动总结报告
2014/07/03 职场文书
售后服务承诺函格式
2015/01/21 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python