Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细

置顶 已于 2024-06-14 17:29:28 修改
阅读量4.9k 收藏 29
点赞数 5
分类专栏： npm vue2基于element-ui组件二次封装 文章标签： npm vue.js elementui 组件库发布 组件封装
于 2023-03-24 13:38:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwin8951/article/details/129747395
版权

最终效果如下

在这里插入图片描述

一、先创建vue2项目

1、 可以用vue-cli自己来创建；也可以直接使用我开源常规的vue2后台管理系统模板

以下我以 wocwin-admin-vue2 项目为例
修改目录结构，最终如下

在这里插入图片描述

2、修改vue.config.js文件

module.exports = {
// 修改 src 目录 为 examples 目录
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },
    // 强制内联CSS（使用组件时，不需要再引入css）
  css: {
    extract: false
  },
  // 别名
  configureWebpack: config => {
    config.resolve.alias['@'] = resolve('examples')
    config.resolve.alias['components'] = resolve('examples/components')
    config.resolve.alias['~'] = resolve('packages')
    // 生产环境配置
    if (isProduction) {
      config.mode = 'production'
      // 打包文件大小配置
      config.performance = {
        maxEntrypointSize: 10000000,
        maxAssetSize: 30000000
      }
    }
  }
}

二、组件开发

1、首先需要创建一个 packages 目录，用来存放组件

2、需要注意的是，组件必须声明 name，这个 name 就是组件的标签

3、这里以组件 TTable 为例，完整的 packages/table 目录结构如下：

在这里插入图片描述

4、每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用

import TTable from './src'

TTable.install = function (Vue) {
  Vue.component(TTable.name, TTable)
}
export default TTable

5、packages 目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出

1、导入组件，组件必须声明 name

import TAntConfigform from './config-form'
import TAntLayoutConditional from './layout-conditional'
import TLayoutPage from './layout-page'
import TLayoutPageItem from './layout-page-item'
import TAntLayoutTable from './layout-table'
import TAntRangePicker from './range-picker'
import TCalendar from './calendar'
import TDatePicker from './date-picker'
import TDialog from './dialog'
import TEditTable from './edit-table'
import TComplexEditTable from './complex-edit-table'
import TForm from './form'
import TIcon from './icon'
import TInput from './input'
import TInputSearch from './input-search'
import TLayout from './layout'
import TPhone from './phone'
import TProtocol from './protocol'
import TQueryCondition from './query-condition'
import TSearch from './search'
import TStepWizard from './step-wizard'
import TSticky from './sticky'
import TTable from './table'
import TTimerBtn from './timer-btn'
import TTreeTable from './tree-table'
import TUploadFile from './upload-file'
import UploadFile from './UploadFile'
import TAntLayoutForm from './layout-form'
import TModuleForm from './module-form'
import TBtnDate from './btn-date'
import TSelect from './select'
import TPaginationSelect from './pagination-select'
import TDetail from './detail'
import { TAntModal, TAntProtocol } from './modal'
import TSelectTable from './select-table'
import TTreeSelect from './tree-select'
import TButton from './button'
import { version } from '../package.json'
// 存储组件列表
const components = [
  TAntConfigform,
  TAntLayoutConditional,
  TLayoutPage,
  TLayoutPageItem,
  TAntLayoutTable,
  TAntRangePicker,
  TCalendar,
  TDialog,
  TDatePicker,
  TForm,
  TIcon,
  TInput,
  TInputSearch,
  TLayout,
  TPhone,
  TProtocol,
  TQueryCondition,
  TSearch,
  TStepWizard,
  TSticky,
  TTable,
  TTimerBtn,
  TTreeTable,
  TUploadFile,
  UploadFile,
  TAntLayoutForm,
  TAntModal,
  TAntProtocol,
  TModuleForm,
  TComplexEditTable,
  TEditTable,
  TBtnDate,
  TSelect,
  TPaginationSelect,
  TDetail,
  TSelectTable,
  TButton,
  TTreeSelect
]

2、定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册

const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  install.installed = true
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

3、导出的对象必须具有 install，才能被 Vue.use() 方法安装（全局使用）

export default {
  version,
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install
}

4、按需引入

export {
  TAntConfigform,
  TAntLayoutConditional,
  TLayoutPage,
  TLayoutPageItem,
  TAntLayoutTable,
  TAntRangePicker,
  TCalendar,
  TDialog,
  TDatePicker,
  TForm,
  TIcon,
  TInput,
  TInputSearch,
  TLayout,
  TPhone,
  TProtocol,
  TQueryCondition,
  TSearch,
  TStepWizard,
  TSticky,
  TTable,
  TTimerBtn,
  TTreeTable,
  TUploadFile,
  UploadFile,
  TAntLayoutForm,
  TAntModal,
  TAntProtocol,
  TModuleForm,
  TComplexEditTable,
  TEditTable,
  TBtnDate,
  TSelect,
  TPaginationSelect,
  TDetail,
  TSelectTable,
  TButton,
  TTreeSelect
}

5、packages/index.js完整代码

import TAntConfigform from './config-form'
import TAntLayoutConditional from './layout-conditional'
import TLayoutPage from './layout-page'
import TLayoutPageItem from './layout-page-item'
import TAntLayoutTable from './layout-table'
import TAntRangePicker from './range-picker'
import TCalendar from './calendar'
import TDatePicker from './date-picker'
import TDialog from './dialog'
import TEditTable from './edit-table'
import TComplexEditTable from './complex-edit-table'
import TForm from './form'
import TIcon from './icon'
import TInput from './input'
import TInputSearch from './input-search'
import TLayout from './layout'
import TPhone from './phone'
import TProtocol from './protocol'
import TQueryCondition from './query-condition'
import TSearch from './search'
// import TSimpleForm from './simple-form'
import TStepWizard from './step-wizard'
import TSticky from './sticky'
import TTable from './table'
import TTimerBtn from './timer-btn'
import TTreeTable from './tree-table'
// import TUploadExcel from './upload-excel'
import TUploadFile from './upload-file'
import UploadFile from './UploadFile'
import TAntLayoutForm from './layout-form'
import TModuleForm from './module-form'
import TBtnDate from './btn-date'
import TSelect from './select'
import TPaginationSelect from './pagination-select'
import TDetail from './detail'
import { TAntModal, TAntProtocol } from './modal'
import TSelectTable from './select-table'
import TTreeSelect from './tree-select'
import TButton from './button'
// import TTheme from './theme'
import { version } from '../package.json'
// 存储组件列表
const components = [
  TAntConfigform,
  TAntLayoutConditional,
  TLayoutPage,
  TLayoutPageItem,
  TAntLayoutTable,
  TAntRangePicker,
  TCalendar,
  TDialog,
  TDatePicker,
  TForm,
  TIcon,
  TInput,
  TInputSearch,
  TLayout,
  TPhone,
  TProtocol,
  TQueryCondition,
  TSearch,
  // TSimpleForm,
  TStepWizard,
  TSticky,
  TTable,
  TTimerBtn,
  TTreeTable,
  // TUploadExcel,
  TUploadFile,
  UploadFile,
  TAntLayoutForm,
  TAntModal,
  TAntProtocol,
  TModuleForm,
  TComplexEditTable,
  TEditTable,
  TBtnDate,
  TSelect,
  TPaginationSelect,
  TDetail,
  TSelectTable,
  TButton,
  TTreeSelect
  // TTheme
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  install.installed = true
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
// 按需引入
export {
  TAntConfigform,
  TAntLayoutConditional,
  TLayoutPage,
  TLayoutPageItem,
  TAntLayoutTable,
  TAntRangePicker,
  TCalendar,
  TDialog,
  TDatePicker,
  TForm,
  TIcon,
  TInput,
  TInputSearch,
  TLayout,
  TPhone,
  TProtocol,
  TQueryCondition,
  TSearch,
  // TSimpleForm,
  TStepWizard,
  TSticky,
  TTable,
  TTimerBtn,
  TTreeTable,
  // TUploadExcel,
  TUploadFile,
  UploadFile,
  TAntLayoutForm,
  TAntModal,
  TAntProtocol,
  TModuleForm,
  TComplexEditTable,
  TEditTable,
  TBtnDate,
  TSelect,
  TPaginationSelect,
  TDetail,
  TSelectTable,
  TButton,
  TTreeSelect
  // TTheme
}
export default {
  version,
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install
}

三、修改package.json文件

1、package.json 文件里面有很多字段要填写，否则不能正确发布。最重要的是以下几个：

  1. name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
  2. version: 版本号，不能和历史版本号相同。
  3. main: 入口文件，默认为 index.js，这里改为 lib/t-ui-plus.umd.cjs。
  4. module: 模块入口，这里改为 lib/t-ui.umd.min.js。
  5. private:false
  6. repository----仓库地址
  7. homepage----组件文档或demo示例
  8. keywords-----关键字（便于搜索）

2、在package.json 文件scripts里面新增一条lib打包命令：

Vue CLI 中提供了构建库的方法，你可以通过下面的命令将一个单独的入口构建为一个库：

vue-cli-service build --target lib --name myLib [entry]

target: 改为 lib 可启用构建库模式应用模式
name: 构建库输出的文件名；
dest: 构建的输出目录，默认为 dist；
entry: 打包入口文件路径；

"scripts": {
   "lib": "vue-cli-service build --target lib --name t-ui --dest lib packages/index.js",
 }

四、发布到npm

1、先查看 npm 的 registry

npm config get registry

2、设置 npm 的 registry 为官方源

npm config set registry https://registry.npmjs.org

3、执行命令 npm login 登录到 npm

4、执行命令 npm publish 发布到 npm

第一次发布需要： npm publish --access public

如出现以下信息，则证明包发布成功:

在这里插入图片描述

5、注：上传的 npm 包，在 72小时 后不可删除，如果是测试用的包，记得 72小时 内删除。

五、安装使用

// 先安装
npm i @wocwin/t-ui
// 1、 在main.js中按下引入(全局使用)
import Tui from '@wocwin/t-ui'
Vue.use(Tui)
// 2、按需引入，在单个vue文件如下引入，在注册；或者在main.js中如下引入在注册，皆可！
import { TTable, TLayoutPage, TLayoutPageItem, TForm, TQueryCondition } from '@wocwin/t-ui'

源码地址

gitHub组件地址

gitee码云组件地址

相关文章

基于ElementUi&Antd再次封装基础组件文档

vue3+ts基于Element-plus再次封装基础组件文档

vite+vue3+ts项目搭建之集成qiankun

wocwin
关注
  • 5
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
从0到1搭建兼容vue2和vue3的前端组件库 - Vue demi
飞翔的熊blabla
07-07 2537
1、创建四个文件，替换其中关键信息2、修改entry，components.json，添加新建的组件信息需要的关键信息只有三个，组件名，组件描述，组件中文名，所以我们创建时要输入如下即可：image想实现命令行提问并收集输入的答案需要用到一个库 inquirer代码很简单},message: '请输入你要新建的组件名（中文）:',default: '示例组件',},message: '请输入组件的功能描述：',default: '默认：这是一个新组件']);
【封装UI组件库系列】全局样式的定义与重置
Ghmin的博客
11-21 532
在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-uiAnt Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢​？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。
Vue 2 中组件详解
最新发布
2301_77661976的博客
04-30 770
2.emit（事件）∗∗：emit是子组件向父组件传递消息的一种方式。在Vue中，组件是可复用的Vue实例，每个组件都可以拥有自己的模板、脚本和样式。在Vue 2中，我们可以使用Vue.component()方法来创建全局组件，也可以使用Vue实例中的components选项来注册局部组件。2.脚本（Script）：包含组件的JavaScript逻辑，可以包括组件的数据、方法、生命周期钩子等。1.模板（Template）：包含组件的HTML结构，使用Vue的模板语法来定义组件的呈现方式。
Vue2组件封装 Vue组件封装
shaoyahu的博客
05-14 4906
写在前面 虽然是Vue2组件封装，主要的内容是记录一下我对封装组件的一些要点和我的看法 ——原学习视频来源于b站黑马从0到1封装组件库 什么是组件 都说Vue是组件化开发，确实有道理，别说按钮输入框这种组件了，就连每个页面，从本质来看也是一个个组件，所以目标很明确，拿来就能用，有一定使用规范和预设样式，我都认为是一个组件，包括有一定规范和预设样式的页面，也可以认为是一个组件 可以写出什么组件？ 关于如何去写自己的组件，我将它分为两块，一块是套路组件，一块是创新组件 套路组件 什么是套路组件，为什么我称之为
vue封装公共组件库并发布到npm库详细教程
weixin_45304198的博客
04-23 3135
vue组件封装的原理：利用vue框架提供的api: Vue.use( plugin )，我们需要把封装好组件的项目打包成vue库，并提供install方法，然后发布到npm中。Vue.use( plugin )的时候会自动执行插件中的install方法。
基于Element UI封装vue组件并发布到npm上使用（lib模式）
六耳石猴的博客
08-31 1110
留坑等补
vue2组件封装
xudechuan的博客
09-05 807
v-model其实是隐藏了:value 和@input 的，特别是后者，在自定义组件中，对于子组件来说，必须要有这个$emit!
vue3 + vite自定义封装vue + element-ui 表格组件，发布到npm包的全过程。
三拾的博客
03-13 4430
当我们项目中用到的表格太多的话，就会导致我们的代码量一直增加，所以我们要封装一个公共得组件，通过传参引入来使用，下面这篇文章主要给大家介绍了关于vue3+vite自定义封装vue组件发布到npm包的相关资料,需要的朋友可以参考下。
vue2+element-ui,el-aside侧边栏容器收缩与展开源码
02-17
Element-UI是基于Vue2的组件库，提供了丰富的UI组件，其中包括el-aside，用于创建侧边栏布局。下面将详细阐述实现这个功能的关键知识点。 1. **Vue2基础知识**： - **组件化**：Vue2的核心特性之一是组件化，通过...
VUE element-ui响应式步骤进度条样式代码
06-11
Element-ui是一个基于Vue.js的UI组件库，它提供了一系列丰富的界面元素，其中包括步骤条组件，非常适合用于处理多步骤流程的用户界面。 一、VUE与element-ui简介 Vue.js是一个轻量级的前端框架，以其易学易用、高...
管理系统系列--A admin template based on vue + element-ui. 基于vue .zip
02-25
管理系统系列--基于Vue + Element-UI的Admin模板 在当今的Web开发领域，构建高效、易用的管理界面模板已经成为开发者的重要任务。Vue.js作为一款轻量级且功能强大的前端框架，结合Element-UI这样的组件库，能够快速...
vue组件库
08-10
在 Vue 生态系统中，组件库如 Element UI、Vuetify 和 Ant Design Vue 都非常流行，它们为开发者提供了丰富的 UI 控件，如按钮、表格、模态框等。 “vucc-master”这个文件名可能代表了一个名为“Vucc”的 Vue 组件...
基于VueCLI3快速生成Vue项目的初步封装组装或必要的零件开箱即用
08-12
"基于VueCLI3快速生成Vue项目的初步封装组装或必要的零件开箱即用"这个标题意味着我们将探讨如何利用Vue CLI 3快速构建项目，并对生成的项目进行初步的封装和定制，以便更好地满足开发需求。 首先，Vue CLI 3通过`...
vue2 封装表格组件
CMDN123456的博客
07-20 1179
vue2 封装表格组件
封装vue2局部组件都要注意什么
Heidi
08-13 1228
注：vue 2.x版本中，<template>节点内dom结构仅支持单个根节点；但在vue 3.x版本中，支持多个根节点。created和mounted的区别：created在模板渲染成html前调用，mounted在模板渲染成html后调用。组件的封装必须高性能低耦合。
vue2 vant ui组件二次封装
qq_41400453的博客
05-24 1059
vue二次封装vant组件技巧，同理elementUI也是这样
UI素材|最全面的移动端 UI KIT 模板
awayaya1的博客
10-07 967
什么是UI组件 UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。 组件的优势 1、保证一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2、反馈用户 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变
Vue2使用v-model封装ElementUI_CheckBox组件
见贤思齐焉，见不贤内自省
06-01 1780
Vue2使用v-model封装ElementUI_CheckBox组件
Vue-组件二次封装
qq_57404736的博客
08-06 2744
在vue中，二次封装Element组件属性、方法、插槽的传递
vue2自己封装element-ui的Carousel组件
05-13
可以尝试以下步骤来封装一个基于 Element UI 的 Carousel 组件： 1. 安装 Element UI： ```bash npm i element-ui -S ``` 2. 创建 Carousel 组件： ```vue <template> <el-carousel :interval="interval" :height="height"> <el-carousel-item v-for="(item, index) in items" :key="index"> <img :src="item.src" alt=""> </el-carousel-item> </el-carousel> </template> <script> import { ElCarousel, ElCarouselItem } from 'element-ui' export default { name: 'MyCarousel', components: { ElCarousel, ElCarouselItem }, props: { items: { type: Array, default: () => [] }, interval: { type: Number, default: 3000 }, height: { type: String, default: '150px' } } } </script> ``` 3. 在需要使用 Carousel 的地方引入组件： ```vue <template> <my-carousel :items="items" :interval="3000" :height="'300px'"></my-carousel> </template> <script> import MyCarousel from './MyCarousel.vue' export default { name: 'MyPage', components: { MyCarousel }, data () { return { items: [ { src: 'https://picsum.photos/800/400?random=1' }, { src: 'https://picsum.photos/800/400?random=2' }, { src: 'https://picsum.photos/800/400?random=3' }, { src: 'https://picsum.photos/800/400?random=4' } ] } } } </script> ``` 这样，就可以在页面中使用自己封装的 Element UI Carousel 组件了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wocwin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值