vue 自定义组件并上传到 npm

阳光下的雨u

已于 2022-01-21 15:21:12 修改

阅读量1k

点赞数 1

文章标签： vue.js npm javascript

于 2022-01-21 15:19:36 首次发布

本文链接：https://blog.youkuaiyun.com/smile2333/article/details/122620245

版权

本文介绍如何在Vue项目中封装可复用组件，并详细说明了从组件开发到发布至npm仓库的具体步骤。

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

定义组件

新建一个package文件夹与src同级用来存放各种组件夹
package 文件夹中再新建个文件夹存放组件, 可多个, 如:input文件夹是一个输入框组件
在input.vue中写入所封装的组件内容,并在本地项目中能使用
测试项目能否使用组件

// 谁用是引用
import Input from "@/components/Input";

在input文件夹里的 index.js 中定义组件名称并暴露出去

// 导入定义的input组件
import Input from "./Input.vue";
Input.install = function(Vue) {
  Vue.component(Input.name, Input);
};
export default Input;

把在package 中的 index.js作为文件入口, 把所要上传的组件暴露出去

// 存储组件列表
import wwinput from "./input";
const components = [wwinput];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
  // 判断是否安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component));
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  wwinput
};

上传到npm

先去npm 中创建个账号
在package 目录下终端执行命令:

准备发布

git init  
name:  ww-input   // 包名，该名不能和已有的名称冲突；
version: 1.0.0 //版本号 不能和历史版本号相同； 
description: input组件  // 简介描述
git repository:  //仓库 可直接回车
license: ISC // 开源协议  
entry:  //入口文件路径
main: //入口文件，应指向编译后的包文件；
keyword：关键字，以空格分割；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm； 
Is this OK? (yes) y 
成功后自动生成一个 package.json 文件 存放所设信息

上传到 npm

npm login / npm adduser
username: 
password: 
email:
npm publish  // 如果报错, 请进入邮箱验证一下 /登录下npm
//成功后会返回组件名字 : ww-input@1.0.0

注意:如果报错有可能是淘宝镜像的原因,先切回源镜像

npm config set registry https://registry.npmjs.org

最后登录npm 查看并下载

登录到 npm 中, 所上传的组件在package目录里面, 查看下载命令下载使用

npm i ww-input