Vue封装组件并发布到npm

没雨溪
3,811 阅读4分钟

Vue封装组件并发布到npm

前言:使用vue在日常工作中,少不了需要封装组件,封装组件可以提高组件的复用性和更好的提高开发效率,本文将讲述如何封装一个模态框组件组件,并且发布到npm上

效果

访问:chst.vip:8081/exam/modal-…

1.环境准备

首先需要配置vue-cli环境,目前使用的是vue-cli@3.7的版本,如果没有环境可以先全局安装

npm i @vue/cli@3.7 -g
//或者
yarn global add @vue/cli@3.7((需要安装yarn))

使用vue-cli快速搭建一个项目

vue create my-app

启动项目

npm run serve
//或者
yarn serve (需要安装yarn)

2.目录结构

构建好项目之后我们可以在src文件夹下面创建一个文件夹就叫做modal,在modal文加下面再创建一个叫做index.vue的文件

1611026453841

3.组件代码

创建好结构后,下面我们开始编写组件,组件封装思路我们依旧采用组件封装三剑客

  1. props传值
  2. $emit传值
  3. slot分发内容

vue最方便的地方在于单文件组件,所以我们可以创建如下组件结构

1.template部分

<template>
  <div class="modal"
       v-if="visible">
    <div class="modal__marsk">
      <div class="modal__content">
        <div class="modal__content--title">
          <slot name="title">
            <h1>提示</h1>
          </slot>
        </div>
        <div class="modal__content--body">
          <slot name="body">
            <p>是否删除?</p>
          </slot>
        </div>
        <div class="modal__content--footer">
          <slot name="footer">
            <button class="primary"
                    @click="comfirm">确定</button>
          </slot>
        </div>
      </div>
    </div>
  </div>
</template>

组件由容器标签modal 遮罩modal__marsk 和内容部分modal__content组成,在modal__content中又分成了3个部分

  1. modal__content--title部分
  2. modal__content--body部分
  3. modal__content--footer部分

以上的css命名方式都采用了BEM命名规范,如果不熟悉的同学可以自行百度了解一下

这3个部分中都使用了具名slot,用于灵活的分发组件内容部分

2.css部分

<style scoped>
  /* scoped属性让css样式模块化 */
  .modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .modal__marsk {
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .modal__content {
    width: 300px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
  }

  .modal__content div {
    margin: 20px 0;
  }
  .primary {
    outline: none;
    border: 0;
    width: 150px;
    height: 30px;
    background: linear-gradient(90deg, #1596fb, #002dff);
    border-radius: 0.28571429rem;
    display: block;
    color: #fff;
    cursor: pointer;
  }
</style>

3.逻辑部分

封装组件我们首先要在脑海里设计好,组件由什么控制,需要触发哪个方法,本文的设计如下

  1. 组件可以通过visible属性,布尔值控制显示或者隐藏 visible

  2. 组件有三个部分可以自定义 title body footer,通过slot可以灵活的传递任意的解耦股

所以我们可以编写如下逻辑,由于我们插件模式需要通过Vue.component进行注册,所以我们给组件添加一个name属性

export default {
    name:"modal",//组件名
    //属性校验模式
    props: {
      visible: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    methods: {
      comfirm() { //点击确定按钮的时候发射事件出去
        this.$emit('on-hidden')
      }
    }
  }

4.发布组件

1.vue插件模式

在vue的插件模式中提供了一个 install。 Vue的插件必须提供一个公开方法 install，这个方法会在你使用Vue.use(yourPlugin)时被调用。这样也就将插件注入到了Vue的全局,所有的子组件都能够使用

2.构建一个js文件,用于vue的插件模式

在src目录下创建一个文件夹叫做ui,里面新建一个index.js

src/ui/index.js代码,我们对组件进行注册,以后可能有多个组件需要发布,所以我们可以批量使用Vue.component进行全局注册,这也就是为什么想element-ui这类组件能够在use之后可以在任意组件中使用的原因

import modal from "../modal"//引入模态框组件
const coms = [modal]//将来如果有其它组件,都可以写到这个数组里

//批量组件注册
const install = function (Vue) {
    coms.forEach(com => {
        Vue.component(com.name, com)
    })
}

export default install //这个方法以后再使用的时候可以被use调用

5.在package.json配置打包路径

我们在package.json中添加一条指令,ui,代码如下,借用了vue-cli的构建方法,构建单独的入口

--target lib 关键字 指定打包的目录 后面可以接上entry打包入口

--name 打包后的文件名字

--dest 打包后的文件夹的名称

    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "ui": "vue-cli-service build --target lib ./src/ui/index.js --name ui-modal --dest dist-modal" 
  },

6.打包ui组件

执行指令

npm run ui
//或者
yarn ui

打包之后会得到的目录如下

161102910845252.png)

在dist-modal中我们得到了好多打包好的文件,接下来我们就可以配置npm发布啦

7.配置 npm

1.在打包好的文件目录下 初始化一个package.json,比如我们打包好的目录是上图中的dist-modal文件夹,那我们可以初始化一个package.json,然后在 package.json 里面添加一些npm包发布的相关信息，比如作者、版本等

但是其中最重要的是我们要配置主文件入口,这个是我们发布npm的关键,我们使用ui-modal.umd.min.js作为主文件入口,umd的含义就是 Universal Module Definition（通用模块规范）是由社区想出来的一种整合了CommonJS和AMD两个模块定义规范的方法 ,使用min的压缩版本,以后可以降低项目的体积

配置dist-modal/package.json中的main

"main": "ui-modal.umd.min.js",

一份package.json配置如下,目前采用比较简单的方式,如果是项目咱们可要严谨些

1611030597214

8.发布到npm

###将源切换成npm官方源,这点非常重要

npm config set registry http://registry.npmjs.org/
  1. 到npm上注册一个账号,然后我们将终端切到dist-modal这个目录中,然后打开终端,输入指令登入
npm login
  1. 添加用户信息
npm adduser
  1. 发布到远程仓库(npm)上
npm publish

如果要删除我们发的包,在2小时之内是可以删除的

删除远程仓库的包

npx force-unpublish package-name '原因描述'

9.使用

等npm发布成功之后,以后就可以通过npm上的指令对发布的组件进行下载安装啦,我们可以进入npm官网,登入,找到自己发的包(刚发布有一定的延迟,耐心等待一下)

这是我们发布的包,点击进入之后可以看到下载方式

蓝色框提示我们最好添加一个readme.md来描述如何使用这个包,如果你想让多人使用,那么添加上吧,不然别人也不会使用

在vue中使用

安装

npm i qf-modal

在vue项目的main.js中加入如下代码

import modal from "modal"
Vue.use(modal)//使用我们的组件注册到全局

这样在其它组件中就可以愉快的使用我们封装的组件了

<modal>...</modal>
avatar
文章
阅读
粉丝