前端公用组件封装提取有两种方式：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>