搭建一个简单的前端组件库

最新推荐文章于 2024-05-27 09:04:41 发布

小呀嘛麻

最新推荐文章于 2024-05-27 09:04:41 发布

阅读量842

点赞数

分类专栏： Vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Ariana_l/article/details/107845226

版权

平时开发时大都会用到组件库，因为用组件库确实能节省不少开发时间，而且第一次使用的时候就觉得好好用，当时就想这要不自己也写一个出来。虽然拖了一年之久，好歹也是开始了，现在记录下开发历程~

传送门：

组件注册

我们先考虑功能，自定义的组件要在全局都能使用，而且也要支持按需引入。

Vue.component('my-component-name', {
    /* ... */ })

Vue.prototype.$XXX = XXX;

安装 Vue.js 插件：

如果插件是一个对象，必须提供install方法

XXX.install = function (Vue) {
   }

因为我们要支持全部引入以及按需引入，所以我们需要提供两个index.js，一个将所有组件引入并在install方法内将所有组件挂载到Vue，一个将单个组件引入并在install方法内将该组件挂载到Vue。

确定目录结构

|-- packages
    |-- comp
        |-- src
            |-- main.vue
        |-- index.js // 单个组件install
    |-- index.js // install所有组件

// index.js 单个组件
import Comp from './src/main.vue'
Comp.install = function (Vue) {
   
    Vue.component(Comp.name

关注