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 相关文章推荐
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
菜鸟javascript基础资料整理3 正则
Dec 06 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
vue用递归组件写树形控件的实例代码
Jul 19 Javascript
js设置默认时间跨度过程详解
Jul 17 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 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
使用NetBeans + Xdebug调试PHP程序的方法
2011/04/12 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
laravel 4安装及入门图文教程
2014/10/29 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
javascript一些实用技巧小结
2011/03/18 Javascript
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
微信小程序 首页制作简单实例
2017/04/07 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
2018/09/12 Javascript
angular6 利用 ngContentOutlet 实现组件位置交换(重排)
2018/11/02 Javascript
JS中比较两个Object数组是否相等方法实例
2019/11/11 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
[12:21]VICI vs TNC (BO3)
2018/06/07 DOTA
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
跟老齐学Python之有点简约的元组
2014/09/24 Python
python3生成随机数实例
2014/10/20 Python
python递归实现快速排序
2018/08/18 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
自定义django admin model表单提交的例子
2019/08/23 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
pytorch构建多模型实例
2020/01/15 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
Python多线程thread及模块使用实例
2020/04/28 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
写自荐信三大法宝
2014/01/24 职场文书
父母对孩子说的话
2014/04/12 职场文书
2014年设计师工作总结
2014/11/25 职场文书
感恩老师主题班会
2015/08/12 职场文书
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers