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

发布时间:2019-05-07 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了制作并发布第一个vue组件的npm包脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
最近在网上找到一个 网页制作辅助工具-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组件的npm包

原结构中红框里是放的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": {    ...   } } 

修改.@R_360_483@

因为要用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包

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

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

参考文献

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

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦!&nbsp;vue,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的制作并发布第一个vue组件的npm包全部内容,希望文章能够帮你解决制作并发布第一个vue组件的npm包所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。