1. Toy模板网首页
  2. > Toy博客

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

10月前 作者：wocwin 分类：Toy博客 阅读(81) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最终效果如下

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

一、先创建vue2项目

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

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

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

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 目录结构如下：

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

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

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

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

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文章来源地址https://www.toymoban.com/news/detail-476732.html

到了这里，关于Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库，如何发布到npm并使用（支持全局或按需引入使用），超详细的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue2 - 引入Element-UI组件样式

    Vue2 - 引入Element-UI组件样式

    官方文档 https://element.eleme.cn/#/zh-CN/component/installation 推荐使用 npm 的方式安装 ，它能更好地和 webpack 打包工具配合使用。 在终端cd到项目文件夹下安装 也可以通过CDN（不推荐） 目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

    2024年02月06日
    浏览(63)

  • vue2自定义封装图片预览组件

    前言：预览图片现在已经有成熟的组件了，比如element ui的图片预览功能，但是现实开发过程中，element ui图片预览已经不满足需求了，比如涉及预览时删除图片以及下载图片 自定义封装图片预览组件 功能：滚轮滚动图片放大、还原图片、左旋转、右旋转、上一张、下一张、删

    2024年01月18日
    浏览(60)

  • vue2+element ui封装搜索组件

    组件使用 封装组件：vueSearch 下拉多选组件：selectecho

    2024年02月08日
    浏览(53)
  • Vue2封装自定义全局Loading组件

    Vue2封装自定义全局Loading组件

    前言 在开发的过程中，点击提交按钮，或者是一些其它场景总会遇到Loading加载框，PC的一些UI库也没有这样的加载框，无法满足业务需求，因此可以自己自定义一个，实现过程如下。 效果图 如何封装？ 第1步：创建要封装成全局组件的文件 第2步：注册组件 Loading这类的通用

    2024年02月15日
    浏览(38)

  • 封装vue2局部组件都要注意什么

    template  =  组件的模板结构  （必选） 每个组件对应的模板结构，需要定义到template节点中 template中使用的指令 template定义根节点 注：vue 2.x版本中，template节点内dom结构仅支持单个根节点；但在vue 3.x版本中，支持多个根节点 script  =  组件的javascript行为  （可选） script中的

    2024年02月13日
    浏览(49)
  • Vue2封装一个全局通知组件并发布到NPM

    Vue2封装一个全局通知组件并发布到NPM

    ✍🏼作者：周棋洛，计算机学生 ♉星座：金牛座 🏠主页：点击查看更多 🌐关键： vue2 组件封装 npm发包 你好！我是王子周棋洛，好久没写文了。 今天带大家 封装 一个类似 element-ui 的全局通知组件，并发布到 npm 后安装使用自己封装的组件。go，go，go🎉 原因1：现成UI组件

    2024年02月09日
    浏览(53)
  • vue2封装一个步进器组件number-box

    vue2封装一个步进器组件number-box

    最近做一个商城的项目，商品的详情页和购物车列表都需要用到上面数量增减的功能，其实这个是一个很普通的功能，但是购物车的列表是放到vuex里面的，这里记录使用的差别： 首先封装number-box组件： 在列表页去引用，并使用v-vmode传递数据： 如果数据是直接在data下面，直

    2024年02月04日
    浏览(48)
  • 【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例

    【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例

    element-ui 提供了大量的组件，如：布局组件、表单组件、JS组件等等。 Element-ui官网： https://element.eleme.cn/#/zh-CN 安装 Element-ui： npm i element-ui -S 1.1.1 引入组件 引入 Element 完整引入(在 main.js 中写入以下内容)： 按需引入 借助 babel-plugin-component，我们可以只引入需要的组件，以达到

    2024年02月07日
    浏览(56)
  • Vue3 + Vite + Ts自己封装的基础组件库发布npm ，npm安装使用（Volar ）支持TS 类型提示功能（vite-plugin-dts 使用）

    Vue3 + Vite + Ts自己封装的基础组件库发布npm ，npm安装使用（Volar ）支持TS 类型提示功能（vite-plugin-dts 使用）

    在开发Vue3 + Ts项目时：使用自己二次封装的基础组件，没有 Ts类型提示 ，不能像 Element-plus 鼠标停在标签或者属性上就能提示当前组件有哪些属性（即props）及其属性的类型，如下图是 Element-plus 组件的 使用Vs Code Volar的提示： 此插件的作用：为打包的库里加入声明文件(即生

    2024年02月09日
    浏览(68)
  • element-ui Vue 封装组件按钮工具栏,使用slot插槽

    element-ui Vue 封装组件按钮工具栏,使用slot插槽

    封装常用按钮工具栏,方便其它页面调用 缺点:工具栏下面div会显示工具栏下面,下面需要使用margin-top:40px(小学生一个没整明白)希望大神能帮解决 运行效果          组件代码 tt-btnBar.vue 父窗口调用 testbtnbar.vue

    2024年02月02日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包