谨记：node 版本一定要新

1、初始化  

首先在一个干净的文件夹中初始化项目

pnpm init

根据提示填写包的名称、版本和描述，最终生成了一个 package.json 文件。

2. 安装 Vue 3

pnpm install vue
pnpm i sass sass-loader --save-dev

3. 创建组件

在项目文件夹中创建一个 src 目录，并在其中新建一个 index.vue 文件，开始编写组件：

<template>
<div>自定义组件</div>
</template>
<script lang="ts" setup>
//vue 的引用要导入
</script>
<style lang="scss" scoped>
</style>

4.配置入口文件

在 src 目录下创建了一个 index.ts 文件：

// src/index.ts
import HwDescriptions from './HwDescriptions/index.vue';
export default HwDescriptions;

5. 添加构建工具

5.1 安装 Vite

pnpm install --save-dev vite @vitejs/plugin-vue

5.2 创建 Vite 配置文件

新建了一个 vite.config.js 文件，配置如下：

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'HwDescriptions',
      fileName: (format) => `hw-descriptions.${format}.js`,
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

6.添加构建脚本

"scripts": {
"build": "vite build"
}

7.构建组件

运行构建命令，生成编译后的组件代码：

pnpm run build

8.更新 package.json

【注意：每次发布一定要更改组件版本】

{
  "name": "hw-descriptions",
  "version": "2.0.1",
  "description": "",
  "main": "dist/hw-descriptions.umd.js",
  "module": "dist/hw-descriptions.es.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "vite build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "vue": "^3.5.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "sass": "^1.92.1",
    "sass-embedded": "^1.92.1",
    "sass-loader": "^16.0.5",
    "vite": "^7.1.5"
  }
}

9.发布到 npm

1、先查看 npm 的 registry

npm config get registry 

2、设置 npm 的 registry 为官方源

npm config set registry https://registry.npmjs.org

3、执行命令 npm login 登录到 npm

npm login 

4、执行命令 npm publish 发布到 npm【注意：每次发布一定要更改组件版本】

npm publish

如出现以下信息，则证明包发布成功:

10、最后安装验证