基于 vue2 发布 npm包_vue2 npm-CSDN博客

本文链接：https://blog.csdn.net/weixin_44804419/article/details/127866878

基于 vue2 发布 npm包

创建一个 v2 的项目在命令行中: `vue create mydemo`

在`src/components`下新建要封装的组件文件,例如 `Elcom`

在该项目中测试组件正常运行后, 在src下新建打包入口文件夹及文件: `Elcom/index.js` 以此为例

//方式一:引入创建的单个组件
	// 我们在使用组件的时候,会用到 Vue.use() 函数，
	// 那么当我们执行这个函数的时候，就会执行我们这里定义的 install 函数。
	import Elcom from "./../components/Elcom.vue";
	const install = (Vue) => {
		//注册组件
	    Vue.component(Elcom.name, Elcom);
	};

//方式二: 引入多个组件
	import ComA from './../components/ComA .vue'
	import ComB from './../components/ComB .vue'
	const components = [
	    ComA ,
	    ComB ,
	]
	// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
	const install = Vue => {
	    // 判断是否可以安装
	    if (install.installed) return
	        // 遍历注册全局组件
	    components.map(component => Vue.component(component.name, component))
	}

//默认导出组件
export default install;

打包组件,需要新建打包命令, 修改 package.json 文件

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "test": "vue-cli-service build --target lib ./src/Elcom/index.js --dest elcom-package --name elcom"
    },

这里我们新增了一个命令，“test”, 因为默认的 build 打包的是 src 下的所有文件，这里我们只需要打包我们自己的组件就可以了。
–target lib 指定打包目录，也就是打包的入口文件 ./src/Elcom/index.js
–dest 打包后的文件夹的名称 elcom-package
–name 打包后的文件名称 elcom.css* elcom.umd.min.js*

执行打包命令 npm run test

打包成功之后，我们可以看到根目录下方，多了一个文件夹elcom-package
在 elcom-package 文件夹下打开终端执行 npm init -y，初始化一个npm,会自动新增一个 package.json 文件。

    {
   	"name": "Tom-elcom", //包名,在npm中搜索的名字,建议先在npm中搜索是否有同名,你可以使用@+你的npm用户名加在包名前面将包划到你的npm账户作用域下
   	"version": "1.0.0",
   	"description": "测试组件",
   	"main": "elcom.umd.min.js",//入口文件 填xxx.umd.min.js这个后缀的文件
   	"files": ["*"],//包含在files中的文件才会被发布上传
   	"private": false,//公开发布一定要加 ,要不然只能自己用
   	"scripts": {
   		"test": "echo \"Error: no test specified\" && exit 1"
   	},
   	"keywords": ["关键字", "组件"], // npm 搜索时的关键字
   	"author": "",//作者
   	"license": "ISC" 
   }

以上npm 包命名可参照

将组件发布到 npm 上

先切在全局cmd换源，再登录发布包，必须使用npm origin ，不能切换成别的镜像
需要先安装npm 源管理器 win+r, 输入cmd打开命令提示符(黑窗口) 执行 npm install -g nrm
发布时使用切换到npm 执行: nrm use npm // 切换成功显示 Registry has been set to: https://registry.npmjs.org/
如需要切换到淘宝镜像执行 nrm use taobao

创建自己的 npm 账号，这里大家百度一下就可以找到(在https://www.npmjs.com/注册账号 , 注意：注册过程中需要邮箱验证)

在打包后生成的 elcom-package 文件夹下,终端执行如下命令
npm login (输入账号密码,输入密码时看不见键入的字符)
输入邮箱,需要接收验证码
发布 npm publish (回车)

发布成功后邮箱会收到success的邮件

至此,已经完成一个组件的发布啦

注意:

如果要修改组件的话需要重新打包npm run test
每一次发布都要更改版本号,可以参考大佬的关于npm版本号详解
建议更新覆盖老版本,不建议删除

安装自己的组件

现在，我们就要在本地安装自己刚刚发布的 npm 包了。

执行命令 npm install Tom-elcom@1.0.0 --save

在 main.js 中使用

import Elcom from "Tom-elcom";//包名

import "Tom-elcom/elcom.css";//引入样式

Vue.use(Elcom);

--------------------------------------------------The End-----------------------------------------------------------------------

以上,如有不足,请多多指正!

-----------------------------------------------------------[坑]---------------------------------------------------------------------------------

发布时的报错信息 You must sign up for private packages
当你的包名为@your-name/your-package时才会出现，原因是当包名以@your-name开头时，npm publish会默认发布为私有包，但是 npm 的私有包需要付费，所以需要添加如下参数进行发布:

npm publish --access public

发布到Nexus私服

注意:在Nexus中账号配置权限 ,不然在adduser和publish会一直报错401：Unable to authenticate, need: BASIC realm=“Sonatype Nexus Repository Manager”
发布时,在生成的 elcom-package 文件夹下,终端执行如下命令
添加注册表用户账户 npm adduser --registry=http://192.168.xxxx/repository/local-npm/ (npm login是它的别名，adduser并且行为完全相同)
然后输入在Nexus设置的用户账号和密码和邮箱
发布 npm publish --registry=http://192.168.xxxx/repository/local-npm/

下载私有包

在全局中先添加源 nrm add 自定义源名 http://192.168.xxxx/repository/local-npm/
切换到源 nrm use 自定义源名
下载插件 npm install Tom-elcom@1.0.0 --registry=http://192.168.xxxx/repository/local-npm/