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输入框邮箱自动提示功能代码实现
Dec 10 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
Sep 19 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
Jan 11 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
详解easyui基于 layui.laydate日期扩展组件
Jul 18 Javascript
详解使用VueJS开发项目中的兼容问题
Aug 02 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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实现网站文件批量压缩下载功能
2015/10/28 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
Angular2使用Guard和Resolve进行验证和权限控制
2017/04/24 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
ligerUI---ListBox(列表框可移动的实例)
2017/11/28 Javascript
vue移动端实现下拉刷新
2018/04/22 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
JS学习笔记之贪吃蛇小游戏demo实例详解
2019/05/29 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
微信小程序开发之转发分享功能
2019/10/22 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
深入解析Python中的WSGI接口
2015/05/11 Python
kali中python版本的切换方法
2019/07/11 Python
Python StringIO及BytesIO包使用方法解析
2020/06/15 Python
Pycharm新手使用教程(图文详解)
2020/09/17 Python
python中二分查找法的实现方法
2020/12/06 Python
button在IE6/7下的黑边去除方案
2012/12/24 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
Whistles官网:英国女装品牌
2020/08/14 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
物业经理求职自我评价
2013/09/22 职场文书
中专毕业生的自我鉴定
2013/12/01 职场文书
审计主管岗位职责
2014/01/31 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
演讲比赛策划方案
2014/06/11 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
解析Java异步之call future
2021/06/14 Java/Android
Ajax实现异步加载数据
2021/11/17 Javascript