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 相关文章推荐
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 Javascript
jQuery EasyUI API 中文文档 - Pagination分页
Sep 29 Javascript
Jquery实现图片左右自动滚动示例
Sep 25 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
Jan 21 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
很棒的vue弹窗组件
May 24 Javascript
使用Node.js实现RESTful API的示例
Aug 01 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 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中使用反射技术的架构插件使用说明
2010/05/18 PHP
PHP Cli 模式设置进程名称的方法
2019/06/12 PHP
使用laravel和ECharts实现折线图效果的例子
2019/10/09 PHP
jQuery参数列表集合
2011/04/06 Javascript
js 金额文本框实现代码
2012/02/14 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
2013/09/26 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
javascript制作2048游戏
2015/03/30 Javascript
详解JavaScript的表达式与运算符
2015/11/30 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
深入理解jQuery3.0的domManip函数
2016/09/01 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
webpack之devtool详解
2018/02/10 Javascript
Vue组件中的data必须是一个function的原因浅析
2018/09/03 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
python技能之数据导出excel的实例代码
2017/08/11 Python
pandas进行时间数据的转换和计算时间差并提取年月日
2019/07/06 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
测绘工程个人的自我评价
2013/11/10 职场文书
师范院校学生自荐信范文
2013/12/27 职场文书
共产党员承诺书
2014/03/25 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
市场营销计划书范文
2015/01/16 职场文书
公司行政助理岗位职责
2015/04/11 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书
python实现图片九宫格分割的示例
2021/04/25 Python
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python
在python中读取和写入CSV文件详情
2022/06/28 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python