vue封装组件发布到Npm

源代码 · 2024-9-4 12:24:30

媒介

项目中由于计划风格、项目模式有许多相似的组件模块，每次都要做抽离、复制、粘贴，作为项目负责人，总是想把相似模块抽离出来作为公共模块，以是就有了把这些模块都扔到npm上的想法，网上呢，也有很多多少文章解说这个东西，但是都会有一些自己上手的过程中碰到卡壳的细节标题，以是我找了一个最清晰也最小白的教程，按照大佬教程一步步手操将每个环节自己的标题都写出来，以供各人参考，要是写的有些不是很到位的表明呢，还请多多包容。各人也可直接移往大佬教程原出处！
1. 情况准备

由于我们封装的是Vue组件，以是我们直接在Vue脚手架项目内里直接举行封装即可。
（1）在终端初始化项目
vue create my-app（2）运行项目
yarn serve2. 组件封装

2.1 新建package文件夹

由于我们大概会封装多个组件，以是在src下面新建一个package文件夹来存放全部须要上传的组件。

这里我封装了一个hy-card组件
2.2 编写组件代码

这里以hy-card组件为例，编写代码，代码如下：
// package/hy-card/index.vue<template> <div2.3 使用Vue插件模式

这一步封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用 Vue.use(plugin) 时被调用，如许使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
在package目次下新建index.js入口文件，代码如下：
// package/index.jsimport hyCard from './hy-card/index.vue' // 引入封装好的组件const coms = [hyCard] // 未来假如有其他组件，都可以写到这个数组内里去// 批量组件注册const install = function(Vue) { coms.forEach((com) => { Vue.component(com.name, com) })}export default install // 这个方法以后再使用的时候可以被 use 调用还有另外一种动态引入组件的方法
// 另一种方法动态引入文件const requireComponent = require.context('./', true, /\.vue$/)const install = (Vue) => { if(install.installed) return // requireComponent.keys() => 数组 requireComponent.keys().forEach(fileName => { // 每一个组件 const config = requireComponent(fileName) // 组件名 const componentName = config.default.name Vue.component(componentName, config.default || config) }) // 全局自界说指令 Vue.directive('focus', { inserted: function(el) { el.focus() } })}// 情况检测if(typeof window !== 'undefined' && window.Vue) { install(window.Vue)}export default { install}
上传代码主要的一项工作就是将我们封装好的组件组册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会实行。
3. 组件打包

到这里为止，我们的组件封装根本就玩成了，假如后续有复杂的需求封装，都可以继承修改。
修改我们项目的package.json文件，设置打包下令：
"package": "vue-cli-service build --target lib ./src/package/index.js --name hy-ui --dest hy-ui"

打包下令表明：

--target lib 关键字指定打包的目次
--name 打包后的文件名字
-- dest 打包后的文件夹的名称
然后实行打包下令：

yarn package打包实行完成后我们项目目次下就会多出来一个hy-ui文件夹，存放的是打包后的文件。

4. 发布到npm

4.1 初始化 package.json

想要发布到npm堆栈，我们还得在hy-ui文件夹下初始化一个package.json文件，进入hy-ui目次，实行下令：
npm init -y

留意：这儿会导致后续发布失败报错
402 Payment Required - PUT https://registry.npmjs.org/xxx - You must sign up for private packages
这个意思是阐明我们要发布的是私有包，由于init之后没有private这个属性，但是我们想要发布公开的，以是这个属性改为false就行，大概增加publishConfig这个属性，也是我们的包更改为公开属性的意思。

由于我们这儿只是测试，以是我不须要更改package.json文件，假如是生产的话，最好加上版本形貌和版本号等等，此中name字段便是我们上传到npm堆栈后的名称。
4.2 发布到 npm 堆栈

（1）注册账号
想要发布到npm堆栈，就必须要有一个账号，先去npm官网注册一个账号，留意记着用户名，暗码和邮箱，发布的时候大概会用得到。
（2）设置npm源
有些小搭档大概本地的npm镜像源接纳的是淘宝镜像源大概其他的，假如想要发布npm包，我们得把npm源切换为官方的，下令如下：
// 查察当前镜像源npm config get registry// 切换镜像源npm config set registry https://registry.npmjs.org（3）添加npm用户
假如是新用户，则进入hy-ui目次，添加npm用户，实行下令：
npm adduser // 这里会让你填写用户名等等，假如之前设置过即可跳过此步。假如之前发布过，则实行登录下令
npm login // 也是会让你填写用户名、暗码、邮箱、邮箱一次性暗码（4）发布npm
在hy-ui目次下实行下令：
// 假如是mac电脑发布失败有大概是权限标题使用 sudo npm publishnpm publish假如发布失败大概是名字重复了，改了名字即可，发布乐成后，我们即可到npm官网上查察自己发布的npm包：

5. 从npm安装使用

直接实行安装下令：
yarn add @zzxhy/hy-ui // 为了防止重复，使用npm账号+到处文件夹名称作为包名，对应的是上面package.json内里的name然后在main.js 引用注册，代码如下：
import HyUi from '@zzxhy/hy-ui'import "@zzxhy/hy-ui/hy-ui.css"Vue.use(HyUi)这里单独引用了css，就和element-ui一样须要单独引用样式文件
由于是全局注册，以是在App.vue内里可以直接使用：

假如全局注册页面效果不表现，缘故因由很大概是把引用的时候标署名和变量名肴杂了，全局注册和局部注册的区别是全局注册时的name就是组件的标署名
而局部祖册是使用变量名作为标署名
以是应该是全局注册的名字和你使用的标署名差异等导致的

到这里我们的组件浅显封装而且发布到npm上去了，后续要是持续更新，记得更改版本号，要是自己只是做的测试包，等候流程测试乐成以跋文得72小时内删除测试包，否则之后无法删除。
npm unpublish 下令只能删除 72 小时以内发布的包
npm unpublish 删除的包，在 24 小时内不答应重复发布
发布包的时候要慎重，只管不要往 npm 上发布没故意义的包！

vue封装组件发布到Npm

所属分类: 问答交流

新帖推荐: 30日

推荐作品