前端公用组件封装提取有两种方式：mixins和组件封装。
Mixins：混入，是一种分发VUE组件中可复用功能的非常灵活的方式，混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
组件：VUE最强大的功能之一，组件可以扩展HTML元素、封装可重用的代码，在较高层面上，组件是自定义的元素，vue的编译器为它添加特殊功能，在有些情况下，组件也可以是原生HTML元素的形式以js特性扩展。
组件在引用之后，相当于在父组件内部开辟了一块单独的空间，来根据父组件props过来的值进行相应的操作，但本质上两者还是泾渭分明的，相对独立。
而mixins则是在引入组件之后，将内部的如data等方法，method等属性与父组件相应内容结合进行合并。相当于在引入后，父组件的各种属性方法被扩充了。
- 单纯组件引用：
父组件 + 子组件 >>> 父组件 + 子组件
- 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包：
- 从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>