如何封装Vue组件并上传到npm

前言

环境准备

1.注册npm账号：npm | Home (npmjs.com)

2.保证当前环境安装了vue、webpack、node，以下工作将在该环境下进行（没有的小伙伴自行百度安装哈~）

3.一下用到的环境版本

  • webpack：v5.1.4
  • node：v12.10.0
  • vue：v2.6.14

4.创建一个基于webpack的vue项目，这个项目将会是我们的组件项目了。

目录结构构建

在我们日常开发的项目中，通常的目录结构可能会像下图，我们一般会在根目录下的src/views中进行我们所有页面的开发，App.vue作为主页面引入。

但是呢，我们现在是想要进行组件开发，那么在项目的目录结构上可根据个人习惯进行一定的调整和更改如下：

 这里我说明一下主要的目录

  • components：存放你所需要开发的所有组件的目录
  • components/lib：存放组件源码
  • components/css：存放可能需要用到的css样式（自定义）
  • components/lib/xxx/index.js:将组件注册魏全局组件
  • examples：最初项目的src，我们可以一边开发一边调试

注意：更改上述目录之后，配置文件也需要进行相应的改变，因为在webpack中，默认以sec/main.js作为入口文件，现我们已将scr->example，所以入口文件应该进行相应的修改

组件开发

这里以Loading组件为例，

  • components/lib/Loading/src/Loading.vue：组件源码
  • components/lib/Loading/src/index.js：单个注册全局组件
  • components/css/loading.scss：存放Loading组件的样式（这里使用的是scss方式，后面关于打包会提到）
  • components/lib/index.js：所有组件的全局注册

代码实例如下：

components/lib/Loading/src/Loading.vue

<template><div class="beva-loading"><img class="loading-icon" :src="imgSrc" alt=""></div>
</template>
<script>export default {name: 'Loading',props: {imgSrc: {type: String,default: ''},},data() {return {}}
}
</script>

components/lib/Loading/src/index.js

import Loading from './src/Loading.vue'Loading.install = function (Vue) { Vue.component(Loading.name, Loading)
}
export default Loading

components/css/loading.scss

	.beva-loading {background-color: rgba(0, 0, 0, 0.7);border-radius: 0.4rem;color: #ffffff;position: fixed;z-index: 99;width: 7.46rem;height: auto;padding: 0.8rem;text-align: center;top: 20vh;box-sizing: border-box;margin-left: -3.73rem;left: 50%;}.loading-icon {width: 4rem;height: 4rem;animation: rotatingright 1s linear infinite;}/*自定义动画类----顺时针旋转（使用这个动画的时候才设置动画执行时间）*/@keyframes rotatingright {transform-origin: 50% 50%;0% {transform: rotate(0deg);}50% {transform: rotate(180deg);}100% {transform: rotate(360deg);}}/*自定义动画类----逆时针旋转（使用这个动画的时候才设置动画执行时间）*/@-webkit-keyframes rotatingleft {0% {-webkit-transform: rotate(0deg);}50% {-webkit-transform: rotate(-180deg);}100% {-webkit-transform: rotate(-360deg);}}

components/lib/index.js

// 将组件库中定义的所有组件引进来，然后再导出
import Demo from './demo';
import Card from './card';
import Loading from './Loading';const components = {Demo,Card,Loading
}
const install = function (Vue) { // 判断是否安装，安装过就不继续往下执行if (install.installed) returnObject.keys(components).forEach(component => { Vue.component(components[component].name, components[component])})
}
export default {install
}

新建webpack.components.js文件，其中主要是对组件打包的配置

1.对打包输出的文件进行处理

2.如果用到了scss、css，图片，则还需要对这些文件进行额外处理

主要配置如下（其中有相关的注释，有兴趣可以自行查看）

const { VueLoaderPlugin } = require('vue-loader');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const glob = require('glob')
const path = require('path')
const list = {}// 动态导入多个组件的入口文件
// 封装组件的一些配置，因为组件打包是单独打包的，所以需要单独配置
async function makeList (dirPath, list) {// 拿到所有的入口文件的路径const files = await glob.sync(`${dirPath}/**/index.js`)//[ 'components/lib/button/index.js', 'components/lib/icon/index.js']// 取出上一级目录的文件名files.forEach(file => {let name = file.split('/')[2]// 判断name是否有后缀名，有的话去除if (name.includes('.')) {name = name.split('.')[0]}list[name] = `./${file}`})// console.log(list)
}
makeList('components/lib', list)
module.exports = {entry: list,mode:'development',output: {filename: '[name].umd.js',// webpack打包的时候会将name替换成入口的name名字，例如card.umd.jspath: path.resolve(__dirname, 'dist'),library:'mui',libraryTarget: 'umd',// 指定输出格式，umd是一种模块，兼容了CommonJS、AMD、CMD},plugins: [new VueLoaderPlugin(),new CleanWebpackPlugin()],module: {// 配置rules，即什么样的文件，使用什么样的loaderrules: [{test: /\.vue$/,use: [{loader: 'vue-loader',}]},{test: /\.css$/,use: ['style-loader','css-loader']},// 这里只处理了css，而项目中组件中使用了scss文件，对于scss文件的处理这里使用的是gulp，下面会提到{test: /\.(png|jpg|gif|svg)$/i, // 匹配图片文件格式type: 'asset/resource', // 使用内置的asset模块处理资源文件generator: {filename: 'images/[name][ext]', // 输出的文件名格式},},],},
}

ps：对于组件中使用的scss文件的处理，这里用到的是gulp，具体设置如下：

新建gulpfile.js，对css文件单独打包（下方用到的第三方依赖需要自定下载）

const gulp = require('gulp');
// 需要把样式代码导入
const sass = require('gulp-sass')(require('sass'));
// 对css代码进行压缩
const minifyCSS = require('gulp-minify-css');
gulp.task('sass', async function () {return gulp.src('components/css/**/*.scss').pipe(sass())// 将scss代码转换成css代码.pipe(minifyCSS())// 压缩css代码.pipe(gulp.dest('dist/css'))// 输出到打包目录
})

接下来就是新增打包命令：

在package.json文件中

最后的打包文件如下：

上传npm

修改package.json文件

在上传npm之前呢，我们有必要对这个组件库信息进行相应的配置，因为npm上发布的包是根据package.json的文件进行匹配的，所以，进行如下信息修改，一般指定如下信息

  • 删除私有属性private
  • description：描述
  • main：入口文件
  • keywords：关键字（方便用户搜索）
  • author：作者信息
  • files：望发布的文件目录（不需要将所有文件都上传到npm中）

距离如下：

添加md文件

打包&&发布

由于这里封装组件的方式是打包发布的方式，所以切记在发布之前进行打包，生成dist文件！

维护版本

手动修改package.json中的version或者执行npm version patch生成迭代一个版本

执行打包命令

npm run build

登陆npm

注意这一需要登陆官方仓库，如果之前连接的是淘宝镜像需要线切换回来。下面是查看仓库源和切换仓库的命令。

npm config get registry  // 查看仓库源
npm config set registry https://registry.npm.taobao.org
npm config set registry http://registry.npmjs.org

 登陆npm，输入账号、密码、邮箱

npm login

 发布

npm publish

测试组件

安装

npm i vue-library-ui

引入&&使用 

 页面

 扩展

我在这个的基础上封装了另外一个组件vue2-edit-cron，主要是可以快速构建cron表达式，有兴趣也可以看看~：vue2-edit-cron - npm (npmjs.com)

总结

        该文组件封装的方式其实是打包发布的方式，这种方式是将装好的组件最终打包成一个或者多个js文件发布。这种方式使得开发和调试时更接近于一个前端项目。但是一旦引入图片等静态资源需要同个BASE64的方式打包到js，而对于字体一类较大的静态资源则根本无法引用

适用范围：没有或极少的依赖第三方插件、图片的组件的封装或JS方法的封装

后面经过了解知道，其实还有另外一种方式即，非打包方式，具体的对比如下：

打包发布非打包发布
webpack需要配置无需配置
发布发布前需要打包发布前无需打包
引用静态文件较小的图片可以通过BASE64方式打包仅js文件随意使用
引用第三方依赖可以引用，但如果第三方依赖包含较多的静态文件时可能会出现引用不到的情况随意引用
被应用的文件一个打包好的js组件的入口文件
调试方法在组件项目中即可调试需要在引用组件的项目中的node_module中对用模块中调试

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/72.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

SAM5716B 法国追梦DREAM 音频DSP芯片

SAM5716B 法国追梦DREAM 音频DSP芯片

法国追梦/DERAM SAM5504/5704/5716/5808音频DSP芯片,开发板&#xff0c;方案 可用于电子鼓、电子琴、电吉他、效果器、均衡器、啸叫抑制器等电声产品领域 全系列芯片&#xff1a; SAM2634 SAM2695 SAM5504B SAM5704B SAM5708B SAM5808B SAM5716B SAM5916B... 原厂开发…
阅读更多...
根据状态转移图实现时序电路

根据状态转移图实现时序电路

描述 某同步时序电路的状态转换图如下&#xff0c;→上表示“C/Y”&#xff0c;圆圈内为现态&#xff0c;→指向次态。 请使用D触发器和必要的逻辑门实现此同步时序电路&#xff0c;用Verilog语言描述。 如图所示&#xff1a; 电路的接口如下图所示&#xff0c;C是单bit数据…
阅读更多...
密码学 | 承诺：常见的承诺方案

密码学 | 承诺：常见的承诺方案

&#x1f951;原文&#xff1a;密码学原语如何应用&#xff1f;解析密码学承诺的妙用 - 知乎 1 简介 密码学承诺 涉及 承诺方、验证方 两个参与方&#xff0c;以及以下两个阶段&#xff1a; 承诺阶段&#xff1a;承诺方选择一个敏感数据 v v v&#xff0c;为它计算出相应…
阅读更多...
【Jupyter Notebook】快捷键

【Jupyter Notebook】快捷键

在命令模式下&#xff0c;单元格边框是灰色&#xff08;缺省&#xff09;的。这些快捷键主要用于操作单元格。 Enter&#xff1a;进入编辑模式Shift Enter&#xff1a;运行当前单元格并选中下一个单元格Ctrl Enter&#xff1a;运行当前单元格Alt Enter&#xff1a;运行当前单…
阅读更多...
Mac多媒体播放器 Movist Pro v2.11.4中文激活版下载

Mac多媒体播放器 Movist Pro v2.11.4中文激活版下载

Movist Pro for Mac是一款专业的媒体播放器&#xff0c;特别为Mac用户设计。它不仅界面简洁美观&#xff0c;而且功能强大&#xff0c;能满足用户各种播放需求。 Movist Pro v2.11.4中文激活版下载 首先&#xff0c;Movist Pro for Mac支持多种媒体文件的播放&#xff0c;包括视…
阅读更多...
关于Qt主窗口的菜单部件

关于Qt主窗口的菜单部件

前言 在介绍主窗口的两大部件之前&#xff0c;我们要先知道关于主窗口的一些知识。 主窗口 一个主窗口可以没有菜单条、工具条、状态条&#xff0c;但必须设置中心部件。在 Q 生成的 C头文件 ui_mainwindow.h 代码中,我们可以看到以下代码: centralWidget new Qwidget(MainWi…
阅读更多...
CSS基础常用属性之颜色（如果想知道CSS的颜色知识点，那么只看这一篇就足够了！）

CSS基础常用属性之颜色（如果想知道CSS的颜色知识点，那么只看这一篇就足够了！）

前言&#xff1a;在我们学习CSS的时候&#xff0c;主要学习选择器和常用的属性&#xff0c;而这篇文章讲解的就是最基础的属性——颜色。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 目录 1.颜色属性 【1】使用颜色关键词表…
阅读更多...
fatal error C1001: An internal error has occurred in the compiler

fatal error C1001: An internal error has occurred in the compiler

VS2008驱动项目A&#xff0c;集成一个Wzarid生成的驱动LIB项目B&#xff0c;在编译64位驱动时,出现以下错误&#xff1a; 1>------ Build started: Project: xxxx, Configuration: Release x64 ------ 1>Linking... 1>fatal error C1001: An internal error has occu…
阅读更多...
怎么在 Spring 服务响应时控制响应时间？

怎么在 Spring 服务响应时控制响应时间？

在Spring应用程序中控制服务响应时间是确保系统性能和用户体验的关键方面之一。在处理请求时&#xff0c;响应时间是指从客户端发送请求到服务端返回响应所花费的时间。 在某些情况下&#xff0c;需要对响应时间进行控制&#xff0c;以确保系统能够及时响应用户请求&#xff0…
阅读更多...
springboot中mongodb连接池配置-源码分析

springboot中mongodb连接池配置-源码分析

yml下spring.data.mongodb 以前mysql等在spring.xxx下配置&#xff0c;现在springboot新版本&#xff08;小编3.2.3&#xff09;在spring.data.xxx下了&#xff0c;如下所示&#xff0c;mongodb的配置在spring.data.mongodb下&#xff1a; 连接池相关参数配置-源码分析 拼接在…
阅读更多...
改进下记录学习的小网站

改进下记录学习的小网站

Strong改进 结束&#xff1a;2024-4-14 打算投入&#xff1a;10h 实际消耗&#xff1a;12h 3m 学习总是不在状态。 我的时间花得很零散&#xff0c;也有点茫然。所以想尝试一下集中式地、一块一块地花&#xff0c;比如投入30个小时&#xff0c;去干一件事&#xff0c;这样就可…
阅读更多...
现在期权开户佣金最低的证券公司是哪家？1.7元/张是真的吗？

现在期权开户佣金最低的证券公司是哪家？1.7元/张是真的吗？

期权开户的要求主要包括以下几个方面&#xff1a; 1. **资金要求**&#xff1a;在申请开户时&#xff0c;保证金账户可用资金余额需要不低于人民币50万元。这是为了确保投资者有足够的资金来应对期权交易的风险。 2. **交易经验**&#xff1a;投资者需要具备股指期货交易经验&…
阅读更多...
Vue的虚拟DOM是什么

Vue的虚拟DOM是什么

核心思想 虚拟DOM/Virtual DOM&#xff0c;是数据驱动视图的一种解决方案。核心思想&#xff1a;使用 js对象的形式来表现html的dom结构。 背景 由于现代网络和浏览器的发展&#xff0c;网页的内容也变得很复杂&#xff0c;ajax 诞生让用户可以在不刷新页面的条件下获取到数…
阅读更多...
Jackson知识点记录

Jackson知识点记录

文章目录 一.Jackson模块说明 二.ObjectMapper基本功能使用ObjectMapper的一些核心方法&#xff1a;示例代码1. 序列化示例2. 反序列化示例3. JsonNode 处理示例 高级配置 三.各种Node1. ObjectNode2. ArrayNode3. ValueNode4. MissingNode示例 一.Jackson Jackson 库主要分为…
阅读更多...
Java面试：算法常用面试题汇总

Java面试：算法常用面试题汇总

1.说一下什么是二分法&#xff1f;使用二分法时需要注意什么&#xff1f;如何用代码实现&#xff1f; 二分法查找&#xff08;Binary Search&#xff09;也称折半查找&#xff0c;是指当每次查询时&#xff0c;将数据分为前后两部分&#xff0c;再用中值和待搜索的值进行比较&…
阅读更多...
螺栓拧紧角度如何检验？——SunTorque智能扭矩系统

螺栓拧紧角度如何检验？——SunTorque智能扭矩系统

智能扭矩系统-智能拧紧系统-扭矩自动控制系统-SunTorque 螺栓拧紧角度检验方法是确保螺栓连接紧固可靠的关键步骤之一。正确的拧紧角度可以确保螺栓的预紧力达到要求&#xff0c;防止松动和失效。下面将详细介绍螺栓拧紧角度检验的步骤和注意事项。 一、螺栓拧紧角度的重要性 …
阅读更多...
component-Echarts柱状图堆叠图与折线图的实现

component-Echarts柱状图堆叠图与折线图的实现

1.效果 2.​​​​​代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><title>ECharts 实例</title><!-- 引入 echarts.js --><script src"https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js&…
阅读更多...
探索存内计算—基于 SRAM 的存内计算与基于 MRAM 的存算一体的探究

探索存内计算—基于 SRAM 的存内计算与基于 MRAM 的存算一体的探究

CSDN存内社区招募&#xff1a;https://bbs.csdn.net/forums/computinginmemory 首个存内计算开发者社区&#xff0c;现0门槛新人加入&#xff0c;发文享积分兑超值礼品&#xff1b; 存内计算先锋/大使在社区投稿&#xff0c;可获得双倍积分&#xff0c;以及社区精选流量推送&a…
阅读更多...
sql篇-内连接-左连接-右连接

sql篇-内连接-左连接-右连接

内连接&#xff1a;表1 inner join 表2 on 条件 inner join join&#xff08;简写&#xff09; 查找&#xff1a;满足 匹配两个表条件的记录&#xff1a;student.s_id s.s_id(不匹配的记录不筛选) select * from student inner join score s on student.s_id s.s_id; 查询…
阅读更多...
找第三方软件测评多久能拿到报告

找第三方软件测评多久能拿到报告

随着软件市场的快速发展&#xff0c;用户对软件质量、性能和安全性的要求也越来越高。为了满足这些需求&#xff0c;许多企业和开发者选择寻求第三方软件测评机构的帮助。那么&#xff0c;找第三方软件测评多久能拿到报告呢&#xff1f;本文将从多个方面为您解析这一问题。 一…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023