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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
永不消失的title提示代码
Feb 15 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
Dec 14 Javascript
JS request函数 用来获取url参数
May 17 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
canvas实现刮刮卡效果
Mar 14 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
Apr 13 jQuery
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
详解react-redux插件入门
Apr 19 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
Oct 28 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 日期时间函数的高级应用技巧
2009/10/10 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
2015/05/12 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP中file_put_contents追加和换行的实现方法
2017/04/01 PHP
PHP删除数组中指定下标的元素方法
2018/02/03 PHP
一个网马的tips实现分析
2010/11/28 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
详解Node全局变量global模块
2017/09/28 Javascript
vue.js,ajax渲染页面的实例
2018/02/11 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
微信小程序页面缩放式侧滑效果的实现代码
2018/11/15 Javascript
详解Node.js异步处理的各种写法
2019/06/09 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
python 字典中取值的两种方法小结
2018/08/02 Python
python实现七段数码管和倒计时效果
2019/11/23 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
英国时尚首饰品牌:Missoma
2020/06/29 全球购物
中专自我鉴定
2014/02/05 职场文书
教堂婚礼主持词
2014/03/14 职场文书
班子成员四风问题自我剖析材料
2014/09/29 职场文书
员工规章制度范本
2015/08/07 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
Python使用PyYAML库读写yaml文件的方法
2022/04/06 Python
mysql sql常用语句大全
2022/06/21 MySQL