前端(vue)npm如何发布自己的包

这篇具有很好参考价值的文章主要介绍了前端(vue)npm如何发布自己的包。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.首先vue create xxx创建一个空的项目(lib和local文件夹怎么来看后面的步骤)

前端(vue)npm如何发布自己的包,vue.js,npm,前端

2.将自己的方法或者组建文件夹放在src同层目录下,我这边是local文件夹

前端(vue)npm如何发布自己的包,vue.js,npm,前端

3.在APP.vue页面引入本地文件测试自己的方法有没有问题

前端(vue)npm如何发布自己的包,vue.js,npm,前端
前端(vue)npm如何发布自己的包,vue.js,npm,前端

4.在package.json中的scripts中配置命令(local/local.js就是自己文件夹的地址)

"lib": "vue-cli-service build --target lib --name landscape-components --dest lib local/local.js"
4.1然后执行:npm run lib会得到lib文件夹

前端(vue)npm如何发布自己的包,vue.js,npm,前端

4.2配置package.json
"name":"local-session",//在npm中搜索的包名,组建名称
"version":"1.0.3",//版本号,每次发包都得更新不能重集
"private": false,//原来为true,要改成false,否则发布不出去
"description":"对于sessionStorage和localStorage进行一个封装便于快速使用",//npm包的描达
"main":"lib/landscape-components.umd.min.js",//入口文件
"keywords":["Local","Susession"],//关键词
"author":["name" "HouMengFei"],//作者

5.添加.npmignore文件,发布npm包的时候忽略不必要的文件,需要编译上传的只有lib、package.json、README.md这三个文件

# 忽略目录
src
local
node_modules
public
utils
# 忽略指定文件
vue.config.js
babel.config.js
*.map
jsconfig.json

6.发布自己的npm包

在npm官网(https://www.npmjs.com/)按照步骤注册一个账号,我这边已经注册好了直接登录就行
前端(vue)npm如何发布自己的包,vue.js,npm,前端

6.1注册成功之后然后在终端中输入命令
npm login//登陆之后会输入npm密码和邮箱,然后会给邮箱发八位数的动验证码

前端(vue)npm如何发布自己的包,vue.js,npm,前端
出现这个之后就说明登陆成功了

npm publish //发布自己的包

6.2更新命令

npm version patch

7.在npm里面查看自己发不上去的包

前端(vue)npm如何发布自己的包,vue.js,npm,前端

前端(vue)npm如何发布自己的包,vue.js,npm,前端

8.在项目中下载使用

npm install local-session -S

前端(vue)npm如何发布自己的包,vue.js,npm,前端
这就可以使用了!!!文章来源地址https://www.toymoban.com/news/detail-517528.html

到了这里,关于前端(vue)npm如何发布自己的包的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

领支付宝红包 赞助服务器费用

相关文章

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

    以下我以 wocwin-admin-vue2 项目为例 修改目录结构,最终如下 1、导入组件,组件必须声明 name 2、定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 3、导出的对象必须具有 install,才能被 Vue.use() 方法安装(全局使用) 4、按需引入 5、packa

    2024年02月08日
    浏览(61)
  • 自己开发或者修改的组件包如何发布到npm官方市场

    1、注册账号 打开npm官方网站: www.npmjs.com; 进行注册 注册需要用户名,密码和邮箱, 当注册完成后需打开邮箱进行验证(邮箱不验证无法上传) 二、  在需要打包发布的文件夹package.json所在目录下 执行命令:npm init  按照提示修改后一路回车就行; package name 就是安装命令

    2024年02月08日
    浏览(29)
  • vue3.x + vite4.3构建属于自己的组件库并发布npm包

    欢迎点击领取 -《前端开发面试题进阶秘籍》:前端登顶之巅-最全面的前端知识点梳理总结 *分享一个使用比较久的🪜 在国内的项目研发过程中,使用vue框架的项目占比很大,同样延伸出了很多非常优秀的UI组件库,比如element-plus、ant-design等;优势:资源较少,快速开发,丰

    2024年02月02日
    浏览(30)
  • 沉淀自己的pro-table组件,并发布到npm(Vue3、element-plus)

    传送门 约定:npm包名 vue3-el-pro-table ,引用 vue3-el-pro-table 的包名为“本项目”。 声明: Vue3ProTable.vue 代码是在这个项目的基础上进行修改的。 作者:hans774882968以及hans774882968以及hans774882968 Quick Start src/main.ts Then use vue3-pro-table / directly in .vue file. Import interface: Component props defi

    2024年02月16日
    浏览(39)
  • npm常用命令 + 前端常用的包管理工具 以及 npm淘宝镜像配置等

    下载地址 官网: https://nodejs.org/en. 中文网站: https://nodejs.org/zh-cn. 安装之后,使用 node -v 命令查看安装的版本,如下: 关于windows上的安装可以参考下面的文章: vue2入门——菜鸟级1篇. 前端常用的包管理工具有:npm、cnpm、yarn,更多请继续…… 前端常用的包管理工具有:n

    2024年02月11日
    浏览(37)
  • 如何使用vite框架封装一个js库,并发布npm包

    目录 前言介绍 一、创建一个vite项目 1、使用创建命令:  2、选择others 3、 模板选择library 4、选择开发语言 ​编辑 二、安装依赖 三、目录介绍 1、vite.config.ts打包文件 2、package.json命令配置文件 三、发布npm 1、注册npm账号 2、设置npm源 3、登录到npm 4、推送到npm仓库 5、查看

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

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

    2024年02月09日
    浏览(36)
  • go:正确引入自己编写的包(如何在 Go 中正确引入自己编写的包)

    目录如下: 1. 工作空间(我的是根目录)新建 go.work 文件 文件内容如下: 2. 添加go.mod文件 1. 包文件夹下 进入testm目录执行 2. 引用目录下执行 进入tuchuang目录执行 3. 引入模块 通过import方式引入。记住只有大写的方法才能被外部引用 运行结果如下:

    2024年02月11日
    浏览(40)
  • 前端 node 常见的包管理工具 npm、npx、Yarn、cnpm、pnpm 的区别有哪些

    些工具都是用于管理 Node.js 包和依赖项的 npm (Node Package Manager) : npm 是 Node.js 的默认包管理工具,随同 Node.js 安装。 主要功能包括安装、发布、管理 JavaScript 包和依赖项。 npm 是最常用的包管理工具之一,拥有庞大的包仓库(npm Registry)。 npx : npx 是 npm 5.2.0 版本引入的一个工

    2024年02月20日
    浏览(32)
  • 发布自己的npm包

    输入npm init后,一路默认即可初始化成功,如下: 初始化成功后会生成一个package.json文件 n(以我的文件夹demo-npm-dir为例) package.json配置如下: 然后在index.js写即可。 这里我设置发布到npm公有平台,根据个人项目需要配置。 注:检测npm源命令 没有请先在官网注册,登录时会

    2024年02月10日
    浏览(43)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包