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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
Angular工具方法学习
Dec 26 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
javascript+html5+css3自定义弹出窗口效果
Oct 26 Javascript
详解webpack提取第三方库的正确姿势
Dec 22 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
Jul 23 Javascript
微信小程序wxs实现吸顶效果
Jan 08 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
PR值查询 | PageRank 查询
2006/12/20 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
fgetcvs在linux的问题
2012/01/15 PHP
WordPress自定义时间显示格式
2015/03/27 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
基于jquery实现后台左侧菜单点击上下滑动显示
2013/04/11 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
webpack打包并将文件加载到指定的位置方法
2018/02/22 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
2021/01/22 Vue.js
Python中使用PDB库调试程序
2015/04/05 Python
Python的gevent框架的入门教程
2015/04/29 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
Python实现的根据文件名查找数据文件功能示例
2018/05/02 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
个人收入证明范本
2014/09/18 职场文书
大学毕业生个人总结
2015/02/28 职场文书
自我推荐信格式模板
2015/03/24 职场文书
个人求职意向书
2015/05/11 职场文书
幼儿园教师管理制度
2015/08/05 职场文书
优秀共产党员事迹材料2016
2016/02/29 职场文书
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技
delete in子查询不走索引问题分析
2022/07/07 MySQL