构建个人组件库——vue.extend和vue.component
需求：构建一个类似elment-ui的组件库，打包发布到npm
个人探索：webpack打包发布到npm流程 --> 组件开发环境和组件发布环境探索 -->两种类型的组件
个人探索流程和实际流程基本是反着来的
本文目标：完成两种类型的组件，extend生成一个类似alert的组件，component生成一个search框组件
前置条件：本人是基于vue-cli全家桶搭的组件开发环境，别说你不会
（1）extend组件构建器
官网描述：听不懂听不懂听不懂 && 官网给的例子很坑 && 官网的组件部分只提到了component（过分啦）
个人描述：暂时还没有挂载到dom文档流中的一个组件说明（你能在网上找到类似说明的欢迎来喷我，第一眼看到就能看懂的也欢迎喷我 ）
（2）component 组件注册器
官网描述：很详细很详细很详细 && 例子很多很多很多 && 初学者肯定会用的
个人描述：我也不需要挂载到dom文档流中，我也还是一个说明(大家都爱用)
官网的坑：
extend 写法：
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}}</p>',
data: function () {
return {
firstName: 'Walter',
}
}
})
// 创建 Profile 实例，并挂载到一个元素上（坑！！！！！！！！！！）
new Profile().$mount('#mount-point')
我用component写一下：
<hello></hello>
Vue.component('hello',
template: '<p>{{firstName}}</p>',
data: function () {
return {
firstName: 'Walter',
}
})
结果都是一样的
<p>Walter</p>
看起来，extend写法还更恶心一点
不但要创建构造器，还要new一个实例，还要挂载到特定的元素上，这个特定元素最终还被完全替换了，不component用起来那么舒服，注册好特定的名字之后，想在哪里用，就在哪里写组件名，程序还更易读。
那不用看下去了，以后都用component了。
所以说extend到底有什么优势呢？只要绕开官网的坑就明白了，生成的实例并不一定要"挂载到一个元素上"。也就是
new 实例().$mount() 的 mount()mount()$mount()…（重要的坑要提醒一百遍）的参数可以为空，但他依旧能生成一个实例。
那么问题来了，生成的实例不挂载到dom文档流里面，有什么用？木有关系！生成的实例里面有el）)
总结：component是extend的亲民版，但在实现某些特殊需求的时候，就需要用到extend，如alert组件，你肯定希望alert可以动态插入到body中，而不需要在dom文档流中放一个莫名其妙的alert，大部分时间他还是隐藏的。（你能用component实现我服你）
你肯定以为我会实现一下本文的目标，然而我只打算提供一个思路，有时间会详细说明两种类型的组件的实现，以及如何用Vue.use（）方法加载个人组件插件。
————————————————
版权声明：本文为CSDN博主「闲人王昱珩」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/dkr380205984/article/details/80116024