如何将vue项目制作成组件并发布到npm仓库中

最新推荐文章于 2024-03-09 18:01:31 发布
最新推荐文章于 2024-03-09 18:01:31 发布
阅读量213 收藏 1
点赞数 1
文章标签： vue npm github webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sfc19/article/details/132587368
版权

前言

vue作为当前前端主流框架，帮我们简化封装的同时还可以将我们自己的小项目发布的npm中央仓库，这是如果有人要使用我们的代码，我们不必在提供自己的项目源码，可以直接让使用者去npm仓库直接下载我们的项目，下面我们就来去实现以下自己的项目发布到npm吧

vue项目初始化

vue create fcsummer-translate（自己的项目名称）

image.png

编写组件

  1. 首先在src中新建package目录

image.png

这是我起的组件名
2. 编写组件

发布项目

  1. 在package根目录下创建index.js
//package/index.js
import FTranslate from "../package/f-translate/index.vue"; // 引入封装好的组件
const array = [FTranslate]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
    array.forEach((com) => {
        Vue.component(com.name, com);
    });
};

export default install; // 这个方法以后再使用的时候可以被use调用

这里的install方法是在以后我们使用npm i下载我们的组件后在main.js中引用

import fTranslate from 'fcsummer-translate'
import '../node_modules/fcsummer-translate/fcsummer-translate.css'
Vue.use(fTranslate) //默认调用上述install方法，让vue去注册我们写的组件
  1. 组件打包
    修改package.json文件
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "package": "vue-cli-service build --target lib ./src/package/index.js --name fcsummer-translate --dest fcsummer-translate"
},
  • –target lib 关键字 指定打包的目录
  • –name 打包后的文件名字
  • –dest 打包后的文件夹的名称

执行命令

npm run package

在命令执行完后我们可以在根目录找到fcsummer-transalte目录

image.png

发布npm仓库

切换到新生成的目录

cd fcsummer-translate

执行命令

npm init -y

初始化项目，还可以执行

npm init

执行后会逐一让你输入要发布的npm包名字，npm包的描述信息和npm包的作者

在package.json中我们填好描述信息

image.png

至此，本地工作基本完成

正式发布

  1. 注册账号
    npm官网
  2. 设置npm源（可选可不选）
npm config set registry=https://registry.npmjs.org
  1. 添加npm账户
npm adduser

需要填写你在npm官网注册的用户名和密码，只需要一次本地npm记住后以后就可以不用了
4. 发布npm

npm publish

如果在这报错，基本上原因就是你的npm包已经被别人占用了，重新编写一个就可以

下载引用

  1. 下载组件
npm i fcsummer-translate
  1. main.js中引用，这里一定要把css也引用上
import fTranslate from 'fcsummer-translate'
import '../node_modules/fcsummer-translate/fcsummer-translate.css'
Vue.use(fTranslate)

3.使用

<template>
  <div id="app">
  《fTranslate/>
  </div>
</template>

注意事项

在打包的时候我们最好–name和–dest相同，不然引用的时候会有找不到包的情况，如果名字重复，删除打包后的文件夹，重新打包

我的项目

[fbk111/fcsummer-translate: 提供中文生成拼音注释 (github.com)]

  1. 引用组件

image.png

  1. 传入content和fontSize
  2. 页面展示（我这里是写死的300px）

image.png

  1. 项目存在bug，希望前端大佬可以积极参与
  2. 已发布到npm

image.png

sfc19
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
markdown中快速插入Emoji表情包语法速查表！！！，web前端服务端开发
2301_79655473的博客
04-04 548
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
如何写一个vue组件发布到npm，包教包会，保姆级教学
最新发布
2301_79098879的博客
04-22 291
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取，点击资料领取直通车免费领取！来是附赠给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等。
简单发布vue组件到npm
weixin_48314721的博客
03-16 288
简单发布vue组件到npm 封装打包发布到npm 将我们的组件定义好 创建index.js文件 引入我们的组件 Vue的插件模式需要暴露一个install方法 在package.json中顶一个打包命令 vue-cli-service build --target lib ./src/common_ui/index.js --dest common_ui --name ui21 // --target lib PATH,打包目录(入口) // --dest DIR 打包后的文件夹名称 // --name
从0开始开发一个vue组件并发布npm，这一篇文章就够了
DreamFJ的博客
07-12 384
从零开始开发一个vue组件打包并发布到npm (把vue组件打包成一个可以直接引用的js文件) https://www.cnblogs.com/Kiddzz/p/8471521.html https://www.jianshu.com/p/b931abe383e3 参考：https://imweb.io/topic/5985e4ed35d7d0a321c5eb82 ...
npm启动vue项目_vue项目封装并发布无限滚动指令优化渲染性能的npm模块
weixin_30880009的博客
01-24 71
曾经在前端之巅看过这么一篇文章，标题是《网站性能优化实战——从12.67s到1.06s的故事》，当时我就纳闷了，哪来的网站首屏需要加载12秒，而且怎么做到这么极致的优化的？果然过了几天，接手了一份祖传代码，运行后发现项目奇卡，渲染也不是一般的慢，除了谷歌和火狐，其他浏览器一律崩溃。 亚马逊的工程师形容说他们的祖传代码:“一座很大的屎山，你见过的最大的山，每次你想修正一个bug，你的工作就是爬到屎山...
（保姆级）vue封装并发布到npm仓库在多个项目使用
m0_74447129的博客
09-18 1296
总体说来Vue组件封装发布到npm仓库整体难度不大，主要是理解Vue的install方法以及打包相关知识，其实最重要的还是如何封装一个适用范围广，扩展性高的公用组件。都看到这里啦，关注一下吧么么哒。
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
Vue项目引进ElementUI组件的方法
12-02
环境要求 Nodejs Nodejs ...打开cmd命令行，输入npm -v，如果出现...安装 vue 脚手架项目初始化工具 vue-cli npm install vue-cli -g 淘宝镜像 npm使用的国外中央仓库，下载速度较慢，有的时候还会有部分文件被墙掉。 npm
vue-mini-weather:基于Vue开发的迷你实时天气预报组件
05-14
2021.04.24 因为刚上传到npm仓库没多久，可能其他镜像库还没有镜像过去，所以要下载只能切换npm源为官方源。 npm i vue-mini-weather --save // 1. 全局引入 //main.js 项目入口文件 import Vue from 'vue' import ...
howdyjs:一个包含Javascript插件，Vue3组件，Vue3指令的工具库
03-18
你好 一个包含Javascript插件，Vue3组件，Vue3指令的轻量工具组件库javascript...新版的Vue组件只可在Vue3中使用，而指令应该向下兼容可同时在Vue2.X中使用 多数包是基于原生JS编写的，基本可直接原生使用，只是为了方
基础vue3+elementUIPlus组件
04-13
框架使用vue3、vuex4、elementUI Plus、JavaScript。 里面是几个简单的基础功能案例，如：ref、refs、reactive、component、生命周期和数据仓库的用法。 适合小白直接ctrl+c。 注意：node_module我清除了，需要自己...
Vue3组件化
影子
08-19 460
Component组件是可复用的Vue实例，且带有一个名字，可以把组件作为自定义元素来使用 可以将项目中重复出现的页面结构定义为Vuew的组件实例，或将特殊功能封装成组件： 组件分为： 全局组件和局部组件 全局组件，在所有Vue实例中都可以使用 通过应用程序实例app的component()方法来定义 语法：app.component（组件名，选项对象） 1、全局组件： <!DOCTYPE html> <html> <head> <meta ch.
Vue组件的打包与使用
weixin_52972239的博客
03-14 371
vue 组件打包
如何把本地的vue项目写的组件上传到npm
weixin_44875212的博客
03-09 1166
平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm，就可以像element ui ant-design-vue这些ui组件库一样通过npm命令下载使用了。
Git使用方法（将本地文件上传到github远程仓库）
irving725的博客
01-30 2664
此文章对于Git的使用介绍的很详细，对于新手很是友好哦。（实测没问题）                Git的安装就不说了。        第一步：我们需要先创建一个本地的版本库（其实也就是一个文件夹）。        你可以直接右击新建文件夹，也可
npm上传发布自定义组件超详细流程
weixin_46194350的博客
11-29 1018
基于element Plus 的el-table二次封装表格并且上传到npm上，让别人可以通过npm安装你的插件。 vue3，vite，npm，自定义npm插件
发布自己的Vue组件库到npm让别人可以下载，很装B同时也很简单.......
量子前端的博客
07-12 1381
心血来潮，很好奇element-ui是怎么搞出来的。其实流程很简单，经过研究。 首先你需要创建一个脚手架，并且配置一些基本webpack配置。 写一些自己的组件，如Button、Radio等等。 在组件根目录创建一个组件下载入口文件index.js npm run build将整个项目文件打包 注册一个npm账号，并在打包完毕后npm login -> npm publish发布到npm上 在自己的业务项目中npm i XXXXX 下载发布到npm上的包 Vue.use(XXX) 这样就大功告成啦。
搭建一个组件库（vue3）
小白一枚~~
04-20 2344
pnpm init。
Vue 组件封装发布 npm 包（2023/03/17）
xiaoQQya的博客
03-17 1314
Vue 组件封装发布 npm 包
vue 封装组件到npm
04-05
1. 创建一个Vue组件库 首先，需要创建一个Vue组件库，并编写组件代码。可以使用Vue CLI来快速创建一个Vue项目： ``` vue create my-component-library ``` 在创建项目时，需要选择手动选择特性，并勾选Babel、Router、Vuex和CSS Pre-processors等选项，以便后续使用。 然后，在src目录下创建components目录，并编写组件代码。例如，创建一个HelloWorld组件： ```vue <template> <div>{{ message }}</div> </template> <script> export default { name: 'HelloWorld', props: { message: String } } </script> ``` 2. 配置打包命令 完成组件编写后，可以使用vue-cli-service进行打包。在package.json文件中添加以下命令： ```json "scripts": { "build": "vue-cli-service build --target lib --name my-component-library src/main.js" } ``` 其中，--target lib表示打包为一个库，--name my-component-library表示库的名称为my-component-library，src/main.js表示入口文件。 3. 配置package.json 在package.json文件中，需要添加以下配置： ```json { "name": "my-component-library", "version": "1.0.0", "description": "A Vue.js component library", "main": "dist/my-component-library.umd.js", "files": [ "dist/*", "src/components/*" ], "keywords": [ "vue", "component", "library" ], "author": "Your Name", "license": "MIT", "peerDependencies": { "vue": "^2.6.11" } } ``` 其中，name、description、keywords、author、license等字段需要根据实际情况进行修改。main字段指定了库的入口文件，files字段指定了需要发布的文件列表，peerDependencies字段指定了依赖的Vue版本。 4. 发布到npm 在npm官网注册并登录账号后，进入项目目录，执行以下命令发布： ``` npm login npm publish ``` 其中，npm login需要输入用户名、密码和邮箱，npm publish会将当前目录下的文件发布到npm仓库。 5. 使用组件库 其他项目可以使用npm install命令安装my-component-library： ``` npm install my-component-library ``` 然后，在需要使用的组件中引入组件库，并注册组件即可： ```js import Vue from 'vue' import MyComponentLibrary from 'my-component-library' Vue.use(MyComponentLibrary) // 或者 import HelloWorld from 'my-component-library/src/components/HelloWorld.vue' Vue.component('HelloWorld', HelloWorld) ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值