构建个人组件库——vue.extend和vue.component

作者:CSDN? 来源:blog.csdn.net 更新时间:2023-05-25 21:55
 需求:构建一个类似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()$mount()$mount()......(重要的坑要提醒一百遍)的参数可以为空,但他依旧能生成一个实例。
    那么问题来了,生成的实例不挂载到dom文档流里面,有什么用?木有关系!生成的实例里面有$el这个参数,记录了生成的dom啊,这个dom你想插哪里插哪里。(document.body.appendChild( 实例.$el))
    总结:component是extend的亲民版,但在实现某些特殊需求的时候,就需要用到extend,如alert组件,你肯定希望alert可以动态插入到body中,而不需要在dom文档流中放一个莫名其妙的alert,大部分时间他还是隐藏的。(你能用component实现我服你)
 
    你肯定以为我会实现一下本文的目标,然而我只打算提供一个思路,有时间会详细说明两种类型的组件的实现,以及如何用Vue.use()方法加载个人组件插件。