基于 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 上
-
先切在全局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/