nmp托管

第 1 步：注册 npm 账号（如果还没有）

1. 打开 https://www.npmjs.com/signup 注册账户；

2. 在本地登录 npm

npm login

输入用户名、密码、邮箱。

第 2 步：初始化项目（如果还没有）

在你的组件目录下执行：

npm init

按提示填写信息，重点字段包括：

• name: 包名，必须唯一（建议带作用域，如 @yourname/your-component）；

• main: 入口文件，比如 dist/index.js；

• module: 如果有 ES 模块支持，填写为 dist/index.esm.js；

• files: 用来指定发布时包含的文件；

• types: 如果有 TypeScript 类型声明文件，比如 dist/index.d.ts；

• keywords, description, repository：有利于搜索和维护。

---

第 3 步：编写组件并构建打包

使用 Vite, Rollup, webpack 等工具将你的组件打包为可发布格式：

例如使用 Vite + Vue3 构建组件库的标准打包：

vite.config.ts export default defineConfig({ build: { lib: { entry: 'src/index.ts', name: 'MyComponentLib', fileName: (format) => `my-component-lib.${format}.js`, }, rollupOptions: { external: ['vue'], output: { globals: { vue: 'Vue', }, }, }, }, })

打包命令：

vite build

打包结果在 dist/ 目录。

第 4 步：创建 .npmignore 或配置 package.json#files

避免将开发文件发布到 npm。方法一：

# .npmignore src/ example/ tests/ .vitepress/ node_modules/

方法二：推荐用 package.json 的 files 字段显式指定发布内容：

"files": [ "dist", "README.md" ]

第 5 步：写好入口文件 src/index.ts

一个标准 Vue 组件库的入口文件示例：

import MyComponent from './MyComponent.vue' export { MyComponent } export default { install(app) { app.component('MyComponent', MyComponent) } }

第 6 步：发布到 npm

确保版本号有更新（npm 不允许重复版本）：

npm version patch

发布：

npm publish

如果你用了作用域名（如 @yourname/xxx），且想作为公开包发布，需要加参数：

npm publish --access public

第 7 步：验证发布结果

发布后：

1. 在 npmjs.com 搜索你的包名；

2. 在项目中使用它：

npm install your-package-name

或：

import { MyComponent } from 'your-package-name'