自定义vue组件发布npm仓库

最新推荐文章于 2024-05-14 09:33:01 发布

wihimi

最新推荐文章于 2024-05-14 09:33:01 发布

阅读量1.4k

点赞数 8

文章标签： npm vue.js 前端

本文链接：https://blog.csdn.net/wihimi/article/details/131186118

版权

本文详细介绍了如何将函数和Vue组件发布到npm的过程，包括npm账号注册、项目配置、编写组件代码、打包、发布到npm以及解决发布过程中遇到的包名合法性、镜像源等问题。同时，文章提供了组件在本地使用的示例和发布后的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、函数放在npm上

准备工作：

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

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

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

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

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

发布：

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

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

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

以下是遇到的问题

问题一：

在 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

问题二：

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

再执行npm publish 就成功了

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

2.1 准备工作

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

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文件目录，里面存放的就是打包后的文件。

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源

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