前端公用组件封装提取有两种方式:mixins和组件封装。

Mixins:混入,是一种分发VUE组件中可复用功能的非常灵活的方式,混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。

组件:VUE最强大的功能之一,组件可以扩展HTML元素、封装可重用的代码,在较高层面上,组件是自定义的元素,vue的编译器为它添加特殊功能,在有些情况下,组件也可以是原生HTML元素的形式以js特性扩展。

组件在引用之后,相当于在父组件内部开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,但本质上两者还是泾渭分明的,相对独立。

而mixins则是在引入组件之后,将内部的如data等方法,method等属性与父组件相应内容结合进行合并。相当于在引入后,父组件的各种属性方法被扩充了。

  1. 单纯组件引用:

父组件 + 子组件 >>> 父组件 + 子组件 

  1. mixins:
    父组件 + 子组件 >>> new父组件
    有点像注册了一个vue的公共方法,可以绑定在多个组件或者多个Vue对象实例中使用。另一点,类似于在原型对象中注册方法,实例对象即组件或者Vue实例对象中,仍然可以定义相同函数名的方法进行覆盖,有点像子类和父类的感觉。

需要注意的是 mixins 混⼊的钩⼦函数会先于组件内的钩⼦函数执⾏(生命周期),并且在遇到同名选项的时候也会有选择性的进⾏合并。

组件之间是可以有通信的,而mixins比组件多了一个data的merge。两者的使用场景不同,具体的还要在不同项目中进行决定用那种方法合适。

方法一:mixins

例如上图所示,两个页面只有表格上部表单搜索部分搜索条件不同,可以用mixins将table-form提取出来,使之整个项目通用。

新建mixins文件夹tableForm.js文件,js文件内结构同.vue文件结构。将公用的data、计算属性、方法等写入js文件。

使用时,import引入并且注册文件,即可完成使用。

import tableFormMixin from '../mixin/tableForm'

export default {

  name: 'list',

  mixins: [tableFormMixin],

  data() {

    return {

    }

  },

}

方法二:封装组件

将一个需求分解为多个小组件的组件封装已经是基本操作了,封装组件就不过多说明了,接下来重点说明组件的打包与发布。

1. 组件封装

1.1 新建package文件夹

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

1.2 编写组件代码

将所需封装的组件代码写入对应文件,如上图SearchToolbar/index.vue。并且在其他地方调用验证是否组件可用

1.3 使用Vue插件模式

这一步是封装组件中的重点,用到了Vue提供的一个公开方法:install。这个方法会在你使用Vue.use(plugin)时被调用,这样使得插件注册到了全局,在子组件的任何地方都可以使用。

在package目录下新建index.js文件,代码如下:

//package/index.js

import SearchToolbar from "@/package/SearchToolbar/index.vue"

const coms = [SearchToolbar]; // 将来如果有其它组件,都可以写到这个数组里



// 批量组件注册

const install = function (Vue) {

  coms.forEach((com) => {

    Vue.component(com.name, com);

  });

};

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

上传代码主要的的一项工作就是将封装好的组件注册为全局组件,用到了Vue.component()方法,当使用Vue.use()时,install方法便会执行。

2. 组件打包

接下来就需要将组件进行打包了。修改项目package.json文件,配置打包命令:

"package": "vue-cli-service build --target lib ./src/package/index.js --name pw-ui --dest pw-ui"

打包命令解释:

--target lib 关键字 指定打包的目录

--name 打包后的文件名字

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

然后执行打包命令:

npm run package

打包执行完成后项目目录下就会多出一个pw-ui文件夹,存放的是打包后的文件。

3. 发布到npm

3.1 初始化package.json

想要发布到npm仓库,还得在pw-ui文件夹下初始化一个package.json文件。进入pw-ui目录,执行命令:

npm init -y

得到新的package.json文件这里只是测试,所以不需要更改package.json文件,如果是生产的话,最好加上版本描述和版本号等等,其中name字段便是上传到npm仓库后的名称。

3.2 发布到npm仓库

(1)注册账号

想要发布到npm仓库,就必须要有一个账号,先去npm官网注册一个账号,注意记住用户名、密码和邮箱,发布的时候可能会用到。

(2)设置npm源

有些可能本地的npm镜像源采用的是淘宝镜像源或者其它的,如果想要发布npm包,得npm源切换为官方源,命令如下:

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

(3)添加npm用户

进入pw-ui目录,添加npm用户,执行命令:

npm adduser

这里会让你填写用户名等等,如果之前设置过即可跳过此步。

(4)发布npm

pw-ui目录下执行命令:

npm publish

如果发布失败可能是名字重复了,改了名字即可,发布成功后,即可到npm光网上查看自己发布得npm包:

  1. 从npm安装使用

直接执行安装命令:

npm install test-zf-pw-ui

 

然后在main.js引用注册,代码如下:

import pwUi from "test-zf-pw-ui";

Vue.use(pwUi);

最后在对应的vue文件,直接使用组件:

<template>

  <div id="app">

    <img alt="Vue logo" src="./assets/logo.png">

    <SearchToolbar></SearchToolbar>

  </div>

</template>

Logo

前往低代码交流专区

更多推荐