vue封装公共组件库并发布到npm库

已于 2024-03-25 22:30:08 修改
阅读量121 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js npm 前端
于 2024-03-25 22:03:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50961467/article/details/137027462
版权

vue组件封装的原理：利用vue框架提供的api: Vue.use( plugin )，我们需要把封装好组件的项目打包成vue库，并提供install方法，然后发布到npm中。Vue.use( plugin )的时候会自动执行插件中的install方法。

发布到npm库

  1. npm config get registry ---- 检查npm源是不是：https://registry.npmjs.org/，大多数人都改成了淘宝镜像，需要改回来
  2. npm login — 登录npm，没有账号需要注册
  3. npm publish — 发布npm库
发飙的狗头人
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 封装npm公用组件
u014051123的博客
10-31 2143
1.首先创建简介版vue项目  vue init webpack-simple vplugin-enum-select 2.将组件代码安排上       3.index.js文件内容 import enumSelect from './enum-select'; enumSelect.install = Vue => Vue.component(enumSelect.name...
封装vue组件上传到npm库
pamerely的博客
06-23 2526
先去npm官网注册一个账号，因为上传的时候需要账号、密码、邮箱。网址：https://www.npmjs.com/package/npm 自己封装一个组件 需要安装 node.js -v8+和vue-cli@2.0版本 先创建一个项目 在你想要存放的文件夹，打开cmd窗口，输入下面命令 vue init webpack-simple <project-name>//这个是项...
Vue 封装自定义组件，通过npm install的方式安装使用
killerdoubie的博客
05-22 1262
Vue 封装自定义组件，通过npm install的方式安装使用
ddvuecomponent订单来了的Vue公共组件库
08-10
dd-vue-component：订单来了的Vue公共组件库
Vue封装组件并发布到npm仓库
最新发布
qq_63497385的博客
07-04 1778
在Vue框架的开发实践中，组件封装是一项核心技能，它极大地促进了代码的复用性和可维护性。通过封装组件，我们能够创建出高度模块化的UI元素，这些元素不仅能在项目内部灵活应用，还能通过npm这样的包管理工具分享给更广泛的开发者群体，如iview、element-ui等流行的Vue UI组件库正是这一理念的体现。然而，每个企业的业务逻辑和界面设计都有其独特性，这意味着即便有现成的组件库，开发人员也往往需要根据具体需求定制或封装新的组件。这不仅增加了维护的复杂度，还可能导致代码在不同项目中失去同步。
对封装好的Vue组件库进行打包，并发布到npm上
墨苒孤的博客
05-22 5758
vue-cli给开发者提供了很多构建目标的命令，我们可以将我们的vue项目构建成应用、库或者Web Components组件。第三步、 使用git commit -m ‘上传组件’ 命令填写 上传描述。上没有的包，否则不能上传，同时我们可以指定入口文件。打包成功后，得到如下文件，其中有不同规范下的js文件。第四步、使用 关联远程仓库并上传代码到远程仓库中。第二步、使用git add命令提交路径下文件。的路径、文件进行忽略，我们在上传到。路径下的打包文件，不需要上传源码。文件 就需要在项目根目录下创建。
封装vue3组件库发布到npm
qq_19650329的博客
03-21 1744
为什么要封装组件 避免重复工作量（模块化） 代码连加清晰（抽象化） 超大型企业级应用（可扩展性） 准备工作 知识库 基础HTML，javaScript,Vue基础 项目准备 目录结构 组件封装 实际应用组件 项目npm发布 标题
vue 封装公共组件库并发布到npm库#记录
junsens的博客
03-21 1073
vue 封装公共组件库并发布到npm库
Vue封装组件并发布到npm仓库(无第三方依赖)
weixin_53474595的博客
12-07 2422
使用Vue框架进行开发，组件封装是一个很常规的操作。一个封装好的组件可以在项目的任意地方使用，甚至我们可以直接从npm仓库下载别人封装好的组件来进行使用，比如iview、element-ui这一类的组件库。但是每个公司的需求是不一样的，我们可以封装自己的组件库并发布到npm上去，这样可以不用碰到相似的项目就复制一大串代码了，简洁明了，要用的时候可以直接从npm安装使用。封装的是Vue组件，所以我们直接在Vue脚手架项目里面进行封装即可（1）初始化Vue项目 （2）运行项目 因为我们可能会封装多个
用vue封装插件并发布到npm的方法步骤
08-29
使用 Vue 封装插件并发布到 npm 需要经过多个步骤，包括初始化组件、实现功能、添加 index.js、修改配置文件等。下面将详细介绍每个步骤的实现过程。 一、初始化组件 使用 Vue-cli 初始化组件，生成基本的项目结构...
Vue组件库发布到npm详解
11-26
制作了一套自己的组件库，并发布到npm上，项目代码见https://github.com/hamger/hg-vcomponents 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm ...
JAVA公共组件平台
10-07
基础数据管理 权限管理 参数管理 公共组件 界面配置
jquery常用到的开源公共组件汇总
04-13
NULL 博文链接：https://yixinhu.iteye.com/blog/1643276
Vue 组件封装 并使用 NPM 发布的教程
10-17
Vue 组件封装与使用 NPM 发布的过程是将开发的Vue组件库通过NPM进行管理和分发的标准流程。本文将详细介绍如何封装一个Vue组件，并将其发布至NPM，以便其他开发者能够方便地通过包管理工具引入和使用这些组件。 ...
vue2 编写自己的组件库，并发布到npm
qq_42859450的博客
06-22 2034
vue2编写自己的组件库，并发布到npm
vue封装公共组件库并发布到npm库详细教程
weixin_45304198的博客
04-23 3330
vue组件封装的原理：利用vue框架提供的api: Vue.use( plugin )，我们需要把封装好组件的项目打包成vue库，并提供install方法，然后发布到npm中。Vue.use( plugin )的时候会自动执行插件中的install方法。
如何封装Vue组件并上传到npm
Amelian的博客
04-18 1224
该文组件封装的方式其实是打包发布的方式，这种方式是将装好的组件最终打包成一个或者多个js文件发布。这种方式使得开发和调试时更接近于一个前端项目。但是一旦引入图片等静态资源需要同个BASE64的方式打包到js，而对于字体一类较大的静态资源则根本无法引用适用范围：没有或极少的依赖第三方插件、图片的组件的封装或JS方法的封装打包发布非打包发布webpack需要配置无需配置发布发布前需要打包发布前无需打包引用静态文件较小的图片可以通过BASE64方式打包仅js文件随意使用引用第三方依赖。
教你如何使用JavaScript如何80行代码写个小项目_如何写javascript的项目目地
2401_84433570的博客
04-27 252
面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】前端面试题汇总JavaScript前端资料汇总。
组件化---创建私有Spec Repo管理项目公共组件库(上)
华仔的博客
01-16 555
Spec Repo的概念理解 CocoaPods对于一名iOS开发来说再熟悉不过了，它的工作原理就是在GitHub上面有个Spec Repo，它里面包括成千上万的podspec文件索引目录。然后我们在项目集成的时候可以通过它去找到我们需要的开源代码。其实CocoaPods的Spec Repo就是一个中介。 1、创建私有 Spec Repo 1、进入./cocoapods/repos 查看已经存在的spec repo cd .cocoapods/repos/ ls -la 2、创建自己的私有spec
vue 封装组件到npm
04-05
首先，需要创建一个Vue组件库，并编写组件代码。可以使用Vue CLI来快速创建一个Vue项目： ``` vue create my-component-library ``` 在创建项目时，需要选择手动选择特性，并勾选Babel、Router、Vuex和CSS Pre-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值