制作并发布第一个vue组件的npm包

bawn 发布于2019-08-23 12:02 / 1135人阅读

摘要：发布到注册进入官网，注册帐号登录并发布提示报错是因为注册完后没有进行邮箱验证，验证完成即可发布成功参考文献如何制作并发布一个的组件的包发布自己第一个组件包基于的文字跑马灯组件

最近在网上找到一个 网页制作辅助工具-jQuery标尺参考线插件 ，觉得在现在的一个项目中能用的上，插件是基于JQuery的，但是现在的项目是用vue写的。So...,
就照葫芦画瓢改装成了Vue组件，总的来说算是一个用处较多的组件，于是乎，就想着把它上传到Npm上分享出来。
以前只用过别人的包，这一次自己上传一个乐呵乐呵...顺便记录发布一下过程。

项目地址

https://github.com/gorkys/vue...

初始化项目

这里用的是webpack-simple,可以理解为精简版的vue-cli

vue init webpack-simple vue-ruler-tool

安装好后再就是一顿常规操作

npm install
npm dev

项目结构

原结构中红框里是放的vue的logo图片，用不着的东西，所以这里就把改成了组件文件夹与组件文件

还需要在src下面新建一个index.js作为入口文件，代码：

// src/index.js
export { default } from "./components/vue-ruler-tool"

修改package.json

{
  "name": "vue-ruler-tool",
  "description": "vue标尺辅助线",
  "version": "1.0.0",
  "author": "gorkys",
  "license": "MIT",  // 开源协议
  // 采用commonJs入口文件，如果不配置，我们在其他项目中就不用import XX from XX来引用了，只能以包名作为起点来指定相对的路径
  "main": "dist/index.js", 
  "jsnext:main": "src/index.js", // 采用es6模块化入口
  "private": false, // 因为组件包是公用的，所以private为false
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
// 指定代码所在的仓库地址
  "repository": {
    "type": "git",
    "url": "https://github.com/mauricius/vue-draggable-resizable.git"
  },
// 提交bug的地址
  "bugs": {
    "url": "https://github.com/mauricius/vue-draggable-resizable/issues"
  },
  // 项目官网的url
  "homepage": "https://github.com/mauricius/vue-draggable-resizable",
  "keywords": [
    "vue",
    "component",
    "dragabble",
    "resizable"
  ], // 指定关键字
  "dependencies": {
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
   ...
  }
}

修改.gitignore

因为要用dist文件夹，所以在.gitignore文件中把dist/去掉。

修改webpack.config.js

// 原
module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "build.js"
  }
...
}
// 新
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"),
    publicPath: "/dist/",
    filename: "index.js",
    libraryTarget: "umd",
    umdNamedDefine: true
  }
...
｝

测试插件

npm run build
npm pack

npm pack 之后，就会在当前目录下生成 一个vue-ruler-tool-1.0.0.tgz 的文件。 
打开一个新的vue项目，将vue-ruler-tool-1.0.0.taz放到目录中，在当前路径下执行

npm install vue-ruler-tool-1.0.0.tgz

在新项目中引用组件就可以使用了

报错

在引用后报错无法解析，需要检查webpack.config.js配置的输出文件路径是否与package.json一样。

发布到npm

1、注册

进入官网，注册帐号

2、登录并发布

npm login
npm publish

提示报错是因为注册完后没有进行邮箱验证，验证完成即可发布成功

参考文献

如何制作并发布一个vue的组件的npm包
发布自己第一个npm 组件包（基于Vue的文字跑马灯组件）

云服务器 GPU云服务器每周数百万下载量!NPM包修复了一个远程 vue组件 NPM包管理器 vue组件开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97871.html

少女风vue组件库制作全攻略~~

摘要：组件监听自定义事件。组件触发自定义事件。生命周期钩子函数，后组件的所有的事件监听器会被移除。技术点总结组件设计的思想包括单数据流事件中心，核心是组件通信。完善给弹出日期面板和关闭日期面板增加组件自定义事件即调用触发和事件。预览组件库官网 github地址如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈，请勿在生产环境中使用，供学习&交流~~ showImg(https://user...

springDevBird 2019-05-21 19:19 评论0 收藏0
基于vue的网页标尺辅助线工具(vue-ruler-tool)

摘要：最近在网上找到一个网页制作辅助工具标尺参考线插件，觉得在现在的一个项目中能用的上，插件是基于的，但是现在的项目是用写的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件，觉得在现在的一...

刘玉平 2019-08-02 16:06 评论0 收藏0
基于vue的网页标尺辅助线工具(vue-ruler-tool)

摘要：最近在网上找到一个网页制作辅助工具标尺参考线插件，觉得在现在的一个项目中能用的上，插件是基于的，但是现在的项目是用写的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件，觉得在现在的一...

codecraft 2019-08-23 12:02 评论0 收藏0
如何发布制作vue组件

摘要：引言如果你自己做了一个感觉还不错的组件，而想分享给别人或者发布到上，那该怎么办呢分享一个大神做的一个模板，这个模板集成了本地测试和打包发布，项目地址附上我的捂脸使用安装发布打包最后别人就可以这样使用你的组件了补引言如果你自己做了一个感觉还不错的vue组件，而想分享给别人或者发布到npm上，那该怎么办呢？ vue-share-components 分享一个大神做的一个 vue 模板，...

smartlion 2019-08-26 11:48 评论0 收藏0