npmvue

vue封装组件发布到Npm

2023-02-01  本文已影响0人  靴唯白

前言

项目中因为设计风格、项目模式有很多相似的组件模块，每次都要做抽离、复制、粘贴，作为项目负责人，总是想把相似模块抽离出来作为公共模块，所以就有了把这些模块都扔到npm上的想法，网上呢，也有好多文章讲解这个东西，但是都会有一些自己上手的过程中遇到卡壳的细节问题，所以我找了一个最清晰也最小白的教程，按照大佬教程一步步手操将每个环节自己的问题都写出来，以供大家参考，要是写的有些不是很到位的解释呢，还请多多见谅。大家也可直接移往大佬教程原出处！

1. 环境准备

因为我们封装的是Vue组件，所以我们直接在Vue脚手架项目里面直接进行封装即可。

（1）在终端初始化项目

vue create my-app

（2）运行项目

yarn serve
项目文件

2. 组件封装

2.1 新建package文件夹

因为我们可能会封装多个组件，所以在src下面新建一个package文件夹来存放所有需要上传的组件。


package包

这里我封装了一个hy-card组件

2.2 编写组件代码

这里以hy-card组件为例，编写代码，代码如下：

// package/hy-card/index.vue
<template>
    <div class="hy-card">
        这是测试卡片
    </div>
</template>

<script>
export default {
    name: 'hy-card'. // 组件名
}
</script>
 
<style scoped>
    .hy-card{
        width: 200px;
        height: 200px;
        box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
        background: #fff;
        line-height: 200px;
        text-align: center;
        margin: 20px auto;
    }
</style>

然后我们引入到 App.vue 组件验证一下，看组件是否能用，代码如下：

// App.vue
<template>
  <div id="app">
    <hyCard></hyCard>
  </div>
</template>

<script>
import hyCard from './package/hy-card'

export default {
  name: 'App',
  components: {
    hyCard
  }
}
</script>

<style>
</style>

最后启动页面显示的效果如下：


启动效果显示

2.3 使用Vue插件模式

这一步封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用 Vue.use(plugin) 时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
在package目录下新建index.js入口文件，代码如下：

 // package/index.js
import 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"
package.json文件修改

打包命令解释：

yarn package

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


打包后的文件夹

4. 发布到npm

4.1 初始化 package.json

想要发布到npm仓库，我们还得在hy-ui文件夹下初始化一个package.json文件，进入hy-ui目录，执行命令：

npm init -y
初始化package.json

注意：这儿会导致后续发布失败报错
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 publish
npm publish

如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm官网上查看自己发布的npm包：

npm 成功发布的包 @zzxhy/hy-ui

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里面可以直接使用：


App.vue
展示

如果全局注册页面效果不显示，原因很可能是把引用的时候标签名和变量名混淆了，全局注册和局部注册的区别是全局注册时的name就是组件的标签名
而局部祖册是使用变量名作为标签名
所以应该是全局注册的名字和你使用的标签名不一致导致的

到这里我们的组件简易封装并且发布到npm上去了，后续要是持续更新，记得更改版本号，要是自己只是做的测试包，等待流程测试成功以后记得72小时内删除测试包，否则之后无法删除。
npm unpublish 命令只能删除 72 小时以内发布的包
npm unpublish 删除的包，在 24 小时内不允许重复发布
发布包的时候要慎重，尽量不要往 npm 上发布没有意义的包！

上一篇 下一篇

猜你喜欢

热点阅读