自定义vue组件发布npm仓库

最新推荐文章于 2024-04-18 16:40:53 发布
最新推荐文章于 2024-04-18 16:40:53 发布
阅读量423 收藏 1
点赞数
文章标签： npm vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wihimi/article/details/131186118
版权

一、函数放在npm上

准备工作：

1、登陆npm官网申请一个有效的账号

2、本地创建一个文件夹（例如：abc）注意：一定不能是驼峰命名

3、文件夹内创建一个index.js文件，一个README.md文件

4、文件夹内打开终端运行 npm init 后填写项目相关信息

5、在index.js写入你想发布的代码

image.png

发布：

6、当前文件夹下运行终端 输入 npm login 进行登陆

8、输入npm账号名-输入密码-输入邮箱-输入验证码（去邮箱里取）

9、终端出现 项目@版本号 说明发布成功了

image.png

以下是遇到的问题

问题一：

image.png

  • 在 npm login 时，报错 Unexpected token < in JSON at position 0 while parsing near '<!DOCTYPE HTML PUBLI...'
  • 原因是发包时必须是 npm 官方镜像地址:

解决办法

# 查看当前镜像地址
$ npm config get registry
# 修改 npm 源地址为官方源
$ npm config set registry https://registry.npmjs.org/
# 将 npm 源地址修改为淘宝源（用于安装 npm 速度慢的时候使用）
$ npm config set registry  https://registry.npm.taobao.org/
  • 执行 $ npm config set registry https://registry.npmjs.org/ 后，再次尝试！

再执行 npm publish

问题二：

image.png

包名不合法，我的是因为 miniVM 包含大写，请改为合法包名且不重复的包名即可。

再执行npm publish 就成功了

二、怎么把一个组件放在npm 上？

2.1 准备工作

在src 下新建package>index.js package>group>index.js package>group>src>index.vue

image.png

2.2 实现组件内容

在package>group>src>index.vue

<template>
  <p class="labelTitle" :name="name">
    {{ name }}<span v-if="tips" class="tips">({{ tips }})</span>
  </p>
</template>
<script>
export default {
  name: 'CtjGroup',
  /**
   * ctj-group属性参数
   * @property {string} [name] 分组名称
   * @property {string} [tips] 补充说明，默认值空
   */
  props: {
    // 分组名称
    name: {
      type: String,
      default: '分组名称',
    },
    // 补充信息
    tips: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
}
</script>
<style lang="css" scoped>
.labelTitle {
  font-weight: bolder;
  font-size: 16px;
  border-left: 4px solid #1890ff;
  padding-left: 4px;
}
.tips {
  font-size: 12px;
  color: #606266;
  font-weight: 400;
  padding-left: 4px;
}
</style>

在package>group>index.js

import Module from './src/index.vue'
// 给组件定义install方法
Module.install = Vue => {
  Vue.component(Module.name, Module) //注意这里使用了组件中的name,
}
export default Module

在package>index.js

import group from './group'
const components = [group]
const install = Vue => {
  // 判断组件是否安装，如果已经安装了就不在安装。
  if (install.installed) return
  install.installed = true
  // 遍历的方式注册所有的组件
  components.map(component => Vue.use(component))
}
// 检查vue是否安装，满足才执行
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 所有的组件必须有一个install的方法，才能通过Vue.use()进行按需注册
  install,
  ...components,
}
2.3 检验组件是否在本地可以使用
 <group :name="'三国演示'" :tips="'中国古典文学四大名著之一'"></group>
import Group from '../../package/group/index.js'
  components: {
    Group
  },
2.4 组件打包

在package.json中增加打包命令

在package.json中增加打包命令
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": "vue-cli-service build --target lib ./src/package/index.js --name webui-whm --dest webui-whm"
  },
说明：
target lib 关键字 指定打包的目录
name 打包后的文件名字
dest 打包后的文件夹的名称
执行打包命令：npm run package
打包完成后，会生成我们指定的webui-whm文件目录，里面存放的就是打包后的文件。

image.png

2.6 切换到webui-whm 目录下， npm init -y来初始化一个package.json文件 并增加README.md文件
2.7 发布 ，注意是在webui-whm 的目录下

2.7.1 登陆npm官网申请一个有效的账号

2.7.2 当前文件夹下运行终端 输入 npm login 进行登陆

2.7.3 输入npm账号名-输入密码-输入邮箱-输入验证码（去邮箱里取）

2.7.4 npm publish

出现+ webui-whm@1.0.0 说明成功了

2.8 设置npm源

实际开发中，本地的npm镜像源都会使用国内的，如果要发布npm 就需要切换到npm的官方源，命令如下

如果安装了nrm，可以使用 nrm ls查看本地npm源

image.png

2.9 使用组件

执行 npm i webui-whm 安装组件

在main.js中添加引用
import webuitest from 'webui-whm';
import 'webui-whm/webui-whm.css'
Vue.use(webuitest);
在页面中添加组件
 <CtjGroup :name="'三国演示'" :tips="'中国古典文学四大名著之一'"></CtjGroup> //组件名就是在组件中的name

参看文章 https://blog.csdn.net/lqh4188/article/details/127027831

wihimi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue封装组件并发布到npm仓库
Mr_linjw的专栏
10-14 625
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到，创建对应的公有组织（私有的要收费）到这里为止，我们的组件封建基本就完成了，当然组件封装成什么样得看自己得业务需求了，接下来我们就需要将组件进行打包了。这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。打包执行完成后我们项目目录下就会多出一个lib文件夹，存放的是打包后的文件。时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
【npm】如何设置仓库地址
少莫千华
06-29 3983
建议更换npm仓库，在执行安装指令。
如何部署npm私有仓库以及在项目中如何使用
最新发布
qq_37155408的博客
04-18 2257
使用 Verdaccio 可以很轻松容易的搭建一个私有的 npm 仓库，可以为团队或个人提供一个方便管理和分享 npm 包的平台，部署和使用都非常简单，大家快用起来吧！
npm如何设置仓库地址
qq_34041723的博客
04-12 7847
遇到的问题：在vue项目中npm如何设置仓库地址呢？
npm 创建一个自己的npm仓库包
周家大小姐
03-13 1491
在vscode中创建一个文件用来放置方法(我以lib为例,我是在vue里边开发开写包,你们可以单独写不一定要写在vue中根据各自情况)如果npm link没有生成package-lock.json 就可以查看下node版本,我的是16生成不了;有时候nrm ls 并不会有*来表示当前的镜像可以试下nrm test 这样就可以知道当的是什么镜像。具体npm命令属性可参考。
对封装好的Vue组件库进行打包，并发布到npm上
墨苒孤的博客
05-22 5435
vue-cli给开发者提供了很多构建目标的命令，我们可以将我们的vue项目构建成应用、库或者Web Components组件。第三步、 使用git commit -m ‘上传组件’ 命令填写 上传描述。上没有的包，否则不能上传，同时我们可以指定入口文件。打包成功后，得到如下文件，其中有不同规范下的js文件。第四步、使用 关联远程仓库并上传代码到远程仓库中。第二步、使用git add命令提交路径下文件。的路径、文件进行忽略，我们在上传到。路径下的打包文件，不需要上传源码。文件 就需要在项目根目录下创建。
将Vue组件打包发布到npm包管理平台
yuansusu_的博客
06-03 2780
想要项目组件上传npm包
从零开始在NPM上发布一个Vue组件的方法步骤
10-17
然后，通过`npm publish`或`yarn publish`命令发布组件到NPM仓库。 6. **注意事项** - 在发布前，确保所有依赖都已经在`dependencies`或`devDependencies`中列出。 - 遵守NPM的命名规则和版本控制策略。 - 添加...
详解如何创建并发布一个 vue 组件
10-17
本篇文章将详细讲解如何创建并发布一个Vue组件，包括组件的编写、版本控制、打包以及发布到npm的过程。 首先，确保你已经安装了Node.js环境，因为Vue CLI依赖于它。接下来，通过以下命令全局安装Vue CLI： ```bash...
vueAudiocustomStylepalyer一个audio标签自定义样式的vue组件
08-10
在描述中提到的 "vueAudio-customStyle-player" 是基于 Vue.js 开发的一个自定义样式的音频播放器组件。这个组件允许开发者对HTML5中的 `<audio>` 标签进行样式定制，以满足不同项目的需求，提供更加个性化和美观的...
vue2.0+ 从插件开发到npm发布的示例代码
08-27
Vue 2.0+ 插件开发到npm发布的流程涵盖了从创建项目、编写插件代码、测试、打包到发布到npm仓库的整个过程。这里我们将详细介绍每个步骤。 1. **初始化项目** 使用`vue init webpack-simple vue-pay-keyboard`命令...
npm组件源码.zip
12-01
6. **发布**：通过`npm login`登录npm账户，然后使用`npm publish`将项目发布到npm公共仓库，或者发布到私有仓库如npmjs.com、GitLab或GitHub Packages。 Vue.js是前端领域的热门框架，它的核心特性之一是组件化。...
企业级 npm 私有仓库部署方案
奇舞周刊
01-03 1764
本文作者系360奇舞团前端开发工程师淘宝 NPM 镜像站切换新域名时，放了一张知乎博主·天猪·的图片，如下：_图片来源：https://zhuanlan.zhihu.com/p/432578145看着逐年增长的访问量，不禁让人感慨，npm 的出现，对 JavaScript 生态产生了深远影响。npm 包下载量的变迁，也是 JavaScript 生态体系发展的一个缩影，同时也是国内公司前端领域发展的...
docker搭建私有npm仓库
qq_37312180的博客
11-29 4535
docker搭建私有npm仓库。
如何把本地的vue项目写的组件上传到npm
weixin_44875212的博客
03-09 1269
平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm，就可以像element ui ant-design-vue这些ui组件库一样通过npm命令下载使用了。
自定义Vue组件，打包发布到npm
blingyun的博客
03-23 1856
如何自己实现的一个npm包
npm私有仓库搭建（验证OK）
FL06052146的博客
03-16 2106
核心：采用verdaccio，Verdaccio 是一个 Node.js创建的轻量的私有npm proxy registry。
vue封装公共组件库并发布到npm库详细教程
weixin_45304198的博客
04-23 3086
vue组件封装的原理：利用vue框架提供的api: Vue.use( plugin )，我们需要把封装好组件的项目打包成vue库，并提供install方法，然后发布到npm中。Vue.use( plugin )的时候会自动执行插件中的install方法。
vue 组件 发布组件到npm
05-23
要将 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` 命令安装你的组件了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值