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插件 cluetip 关键词注释
Jan 12 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
HTML页面,测试JS对C函数的调用简单实例
Aug 09 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
vue 录制视频并压缩视频文件的方法
Jul 27 Javascript
layuiAdmin循环遍历展示商品图片列表的方法
Sep 16 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
Sep 26 Javascript
JS实现点餐自动选择框(案例分析)
Dec 10 Javascript
JavaScript实现Tab选项卡切换
Feb 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注销代码(session注销)
2012/05/31 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
JavaScript常用本地对象小结
2016/03/28 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
2017/08/23 Javascript
JS实现自定义弹窗功能
2018/08/08 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
JS三级联动代码格式实例详解
2019/12/30 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
python删除列表内容
2015/08/04 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
快速解决docker-py api版本不兼容的问题
2019/08/30 Python
python使用pygame实现笑脸乒乓球弹珠球游戏
2019/11/25 Python
python实现马丁策略回测3000只股票的实例代码
2021/01/22 Python
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
英国排名第一的LED灯泡网站:LED Bulbs
2019/09/03 全球购物
学习党章思想汇报
2014/01/07 职场文书
职业规划书如何设计?
2014/01/09 职场文书
合作意向协议书范本
2014/03/31 职场文书
大学生村官座谈会发言材料
2014/05/25 职场文书
服装仓管员岗位职责
2014/06/17 职场文书
咖啡店创业计划书
2014/08/15 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
vue 实现上传组件
2021/05/31 Vue.js
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server