自定义npm组件库-小祥驿站

简介前端开发经常需要使用到 npm 安装第三方库，那么如何将自己写的库上传到 npm 进行使用呢？

注册npm账号

注册好之后记得去填的注册邮箱里面验证一下

切换官方镜像源

复制copy1
2
// 修改 npm 源地址为官方源
$ npm config set registry https://registry.npmjs.org/

不切换有可能会导致无法登录

npm登录

复制copy1
2
3
4
5
6
7
8
9
10
11
12
13
// 登录命令
$ npm login
// 按照要求填写登录信息
PS F:\python\zfx-design-vue\src\zfx-design> npm login
npm WARN adduser `adduser` will be split into `login` and `register` in a future version. `adduser` will become an alias of `register`. `login` (currently an alias) will become its own command.
npm notice Log in on https://registry.npmjs.org/
Username: zfx-design-vue
Password:
Email: (this IS public) xxxxx@qq.com
npm notice Please check your email for a one-time password (OTP)
Enter one-time password:
Enter one-time password: 收到的邮箱验证码
Logged in as zfx-design-vue on https://registry.npmjs.org/.

登录成功后创建package.json

复制copy1
2
// 命令
npm init

创建成功后发布代码

复制copy1
2
3
4
5
6
7
8
9
10
11
12
// 普通包
npm publish
// 出现以下错误，请修改版本号，版本号已存在了
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/zfx-design - You cannot publish over the previously published versions: 1.0.0.
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Local\npm-cache\_logs\2023-11-10T08_16_39_084Z-debug-0.log
// 修改之后重新发布

发布成功后安装组件

复制copy1
2
// 安装命令
npm i zfx-design

拉取组件后使用

复制copy1
2
3
4
5
6
7
8
9
10
import { createApp } from 'vue'
import './style.css'
import App from './App.vue';
import router from "./router";
import { install } from './zfx-design';

const app = createApp(App)
app.use(router)
app.use(install)
app.mount('#app')