公用工具类js发布到npm 引入到vue

初始化项目

在只想创建单个工具类的组件库时,可以直接npm init生成一个pakeage.json文件

// -y 的含义:yes的意思,在init的时候省去了敲回车的步骤,生成的默认的package.json
npm init -y

初始完之后,在要目录会生成一个package.json文件,可在里面设置设置项

修改package.json文件

在这里插入图片描述

开始工具类js归类

在根目录下创建一个工具类文件夹utils,utils新建命名regexList.js文件
在这里插入图片描述

部署到github

创建自己的github账号,登录创建,省略注册部分了。。。
创建仓库
在这里插入图片描述
提示这块报提示是因为已经有同名称的了,可以换一个,没有同名称的点确认就行

增加 .gitignore文件,指定忽略文件不被git push上去

在这里插入图片描述

在右上角下拉处点击your profile跳转到对应仓库拿到地址
在这里插入图片描述
进行git push代码那一套,在这里不多说,成功之后在github创建的仓库里看到自己的最新代码

发布到npm

多说一句,之前init项目的package.json version每发布一回需要升级版本号

npm config get registry ---- 检查npm源是不是:https://registry.npmjs.org/,大多数人都用的私有源,要切回来,可以用nrm管理来切到npm

npm login — 登录npm,没有账号需要注册

npm publish — 发布npm库

增加 .npmignore文件,指定忽略文件不被npm管理

在这里插入图片描述

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要将 Vue 组件发布npm 上,可以按照以下步骤进行操作: 1. 在你的项目根目录下,使用 `npm init` 命令创建一个 `package.json` 文件。 2. 在 `package.json` 中添加 `main` 属性,指定组件的入口文件路径,例如: ``` "main": "dist/my-component.js", ``` 这里假设你的组件入口文件是 `my-component.js`,并且已经打包到了 `dist` 目录下。 3. 在项目根目录下创建一个 `.npmignore` 文件,用于指定哪些文件不需要被发布npm 上。例如: ``` node_modules/ dist/ ``` 这里的意思是排除 `node_modules` 和 `dist` 目录,因为这些文件夹通常都比较大,而且在安装组件时也不需要这些文件。 4. 在 `package.json` 中添加 `scripts` 属性,用于定义打包命令,例如: ``` "scripts": { "build": "vue-cli-service build --target lib --name my-component src/index.js" }, ``` 这里假设你使用 Vue CLI 3.x 创建了组件项目,并且入口文件是 `src/index.js`。运行 `npm run build` 命令会将组件打包到 `dist` 目录下。 5. 添加 `peerDependencies` 属性,用于指定组件的依赖关系,例如: ``` "peerDependencies": { "vue": "^2.6.10" }, ``` 这里假设你的组件依赖于 Vue 2.x 版本。 6. 确认所有依赖项都已经安装完成,然后使用 `npm login` 命令登录到 npm 账号。 7. 使用 `npm publish` 命令将组件发布npm 上,例如: ``` npm publish ``` 这里假设你已经在 `package.json` 中指定了包名和版本号。 发布成功后,其他人就可以通过 `npm install` 命令安装你的组件了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值