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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
Jan 23 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
js中typeof的用法汇总
Dec 12 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
原生javascript AJAX 三级联动的实现代码
May 04 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
Node.js操作MongoDB数据库实例分析
Jan 19 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
phpnow php探针环境检测代码
2014/11/04 PHP
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
css transform 3D幻灯片特效实现步骤解读
2013/03/27 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
浅析JavaScript中的同名标识符优先级
2013/12/06 Javascript
js获取视频时长代码
2014/04/10 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
使用nodejs开发cli项目实例
2015/06/03 NodeJs
原生JavaScript实现滚动条效果
2020/03/24 Javascript
RequireJs的使用详解
2017/02/19 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
基于iview的router常用控制方式
2019/05/30 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Python中Django发送带图片和附件的邮件
2017/03/31 Python
详解Python自建logging模块
2018/01/29 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python Scrapy多页数据爬取实现过程解析
2020/06/12 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
求职者应聘的自我评价
2013/10/16 职场文书
酒吧总经理岗位职责
2013/12/10 职场文书
护士演讲稿范文
2014/01/05 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
销售主管竞聘书
2014/03/31 职场文书
解除合同协议书
2014/04/17 职场文书
教师师德师风自我剖析材料
2014/09/29 职场文书
团队会宣传标语
2014/10/09 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
给老婆的检讨书1000字
2015/01/01 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
Tomcat用户管理的优化配置详解
2022/03/31 Servers
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技