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 相关文章推荐
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
javascript 保存文件到本地实现方法
Nov 29 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
js获取当前日期前七天的方法
Feb 28 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
Three.js 再探 - 写一个微信跳一跳极简版游戏
Jan 04 Javascript
vue实现添加与删除图书功能
Oct 07 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
Mar 23 Javascript
Vue 请求传公共参数的操作
Jul 31 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
虫族 ZERG 概述
2020/03/14 星际争霸
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
php隐藏实际地址的文件下载方法
2015/04/18 PHP
JS判断元素为数字的奇异写法分享
2012/08/01 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
常用的几段javascript代码分享
2014/03/25 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
详解JavaScript逻辑And运算符
2015/12/04 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
微信小程序 slot踩坑的解决
2019/04/01 Javascript
JavaScript实现的联动菜单特效示例
2019/07/08 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
[50:50]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第一场 12.10
2020/12/13 DOTA
python 图片验证码代码分享
2012/07/04 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
OpenCV+python实现膨胀和腐蚀的示例
2020/12/21 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
室内设计专业个人的自我评价
2013/12/18 职场文书
学徒工职责
2014/03/06 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
初中学校军训方案
2014/05/09 职场文书
领导班子党的群众路线教育实践活动对照检查材料
2014/09/25 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
老干部工作汇报材料
2014/10/28 职场文书
先进集体事迹材料范文
2014/12/25 职场文书
先进个人材料怎么写
2014/12/30 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
身份证丢失证明
2015/06/19 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python