打包vue组件,上传到npm库

1.先去官网注册npm账号

2.注册成功后,通过webpack-simple创建项目

    npm init webpack-simple custome-switch   成功后生成的目录如下 

  

3.在和src同级的目录下新增 packages目录→在packages目录下新建 src目录 → 在src目录下创建一个switch目录 → 在switch目录下新建 custome.vue 和 index.js   新建好的目录如下

4.编写custome.vue组件的内容  如下  和正常组件编写一样

5.switch/index.js 代码如下

6.修改webpack.config.js的   指定出口  入口文件

7.修改package.json文件  指定main  和 private 修改为false

8.修改index.html  入口index.html  (因为我的名字是custome-switch )

 <script src="dist/custome-switch.js"></script>

最后:

打包生成线上文件 npm run build 登录npm,根据提示完成 :npm login (若是cnpm请且为npm登录) 提交npm包: npm publish(若提示该组件已存在,请更改名字)

ps:如果想要更新npm包的版本  npm version patch   然后npm publish

 

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值