【前端基础知识】如何发布一个 npm 包?

一、官方库

npmjs 官网

1、注册一个账号

在这里插入图片描述

2、初始化项目

npm init

输入包名称,然后其他信息根据需求进行填写,不填则回车,最终会生成 package.json 文件
在这里插入图片描述

3、新建工具类

在lib文件夹下新建test.js文件

//test.js
class Test {
    hello() {
        console.log('hello world')
    }
}

module.exports = Test;

4、新建入口文件

在根目录下新建 index.js 文件

//入口文件 index.js

const Test = require("./lib/test");

module.exports = {
    Test
};

5、登录仓库

npm addUser
在这里插入图片描述

遇到403的问题:原因可能是镜像地址用的是淘宝镜像的地址,需要切换官网地址就可以

切换镜像地址的命令:npm config set registry <地址>
官网地址:https://registry.npmjs.org
淘宝镜像地址:https://registry.npm.taobao.org/

6、发布包

npm publish

在这里插入图片描述
在这里插入图片描述

7、下载包

npm i npm-dwh-test

在这里插入图片描述
下载成功!

8、更新包

npm version xx

补丁版本更新:patch
增加新功能:minor
大改动:major

在这里插入图片描述

在这里插入图片描述

9、删除包

npm unpublish <包名>@版本号 --force

不输入版本号就是删除整个包
在这里插入图片描述
在这里插入图片描述
删除成功!

二、私有库

Verdaccio文档

1、全局安装verdaccio

npm i -g verdaccio

在这里插入图片描述

2、运行verdaccio

verdaccio

在这里插入图片描述
在这里插入图片描述
运行成功!

3、登录

npm adduser --registry http://localhost:4873/

在这里插入图片描述

4、发布

在这里插入图片描述
在这里插入图片描述
发布成功!

5、更新包

在这里插入图片描述
在这里插入图片描述

6、删除包

删除对应版本
在这里插入图片描述
在这里插入图片描述
删除包
在这里插入图片描述
无法删除整个包,所以只能删除对应的版本

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,我可以为您提供一些参考: 首先,您需要创建一个基本的HTML文件和Vue.js框架: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js Example</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello, Vue!' } }) </script> </body> </html> ``` 上面的代码中,我们使用了Vue.js框架,创建了一个Vue实例,并将其绑定到了一个id为“app”的div元素上。我们还定义了一个data属性,其中一个message属性,该属性将在页面上显示“Hello, Vue!”消息。 接下来,我们可以添加更多的Vue组件来增强我们的页面。以下是一个简单的示例: ``` <div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<div>This is my component!</div>' }) var app = new Vue({ el: '#app' }) </script> ``` 上面的代码中,我们创建了一个名为“my-component”的Vue组件,然后在我们的Vue实例中引用它。我们还定义了组件的模板,该模板一个简单的消息。 您可以在模板中添加更多的HTML和Vue.js指令,以创建更复杂的组件和页面。例如,您可以使用v-for指令来循环渲染一个列表: ``` <div id="app"> <ul> <li v-for="item in items">{{ item }}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { items: ['Item 1', 'Item 2', 'Item 3'] } }) </script> ``` 上面的代码中,我们使用v-for指令来循环渲染一个含三个项目的列表。我们还将items属性添加到我们的Vue实例中,以便在页面上显示它们。 这只是Vue.js和HTML的基础知识,您可以通过学习更多的Vue.js指令和组件,以及使用CSS样式来使页面更美观。希望这能帮助您入门Vue.js开发!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@Dai

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值