向npm发布自己写的vue组件，使用vite创建项目

创建项目

pnpm create vite

输入项目名称

由于我的组件是基于 ant-design-vue和vue的，需要解析.vue文件，我又安装了下面4个。

然后执行 pnpm i安装依赖

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [
    vue(),
  ],
  build: {
    lib: {
      entry: './lib/main.ts',
      name: 'aixiaodou-ui', // 需要和你的项目名称一致
      fileName: 'aixiaodou-ui'// 需要和你的项目名称一致
    },
    rollupOptions:{
      external:['vue'],
      output:{
        format:'umd',
        exports:'named',
        globals:{
          vue:'Vue'
        },
      },
    },
    minify:'terser',
    terserOptions: {
      compress: {
        drop_console: true, // 生产环境下去除console
        drop_debugger: true, // 生产环境下去除debugger
      }
    }
  }
})

package.json

{
  "name": "aixiaodou-ui",
  "private": false, // 设置为false
  "version": "0.0.5", // 版本号，每次推送需加1，不能和已推送的相同
  "type": "module",
  "files": [ // 设置要推送的文件，我把源码lib也推送了
    "dist",
    "index.d.ts",
    "lib"
  ],
  "main": "./dist/aixiaodou-ui.umd.cjs", // 需要和你的项目名称一致
  "module": "./dist/aixiaodou-ui.js", // 需要和你的项目名称一致
  "types": "./index.d.ts",
  "exports": {
    "types": "./index.d.ts",
    "import": "./dist/aixiaodou-ui.js", // 需要和你的项目名称一致
    "require": "./dist/aixiaodou-ui.umd.cjs" // 需要和你的项目名称一致
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "terser": "^5.31.0",
    "typescript": "^5.4.5",
    "vite": "^5.2.10"
  },
  "dependencies": {
    "@ant-design/icons-vue": "^7.0.1",
    "ant-design-vue": "^4.2.1",
    "vue": "^3.4.27"
  }
}

修改 index.d.ts

利于编译器提示

打包构建

构建成功后会生成dist目录

pnpm build

登录npm

登录注册账号 https://www.npmjs.com/

设置 npm源

也可以使用nrm切换

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

登录npm

npm login

根据提示，输入用户名，输入密码 进行登录

发布

npm publish

发布成功后可以在npm网站内看到

发布成功后就可以使用npm命令进行安装使用了
npm i -S aixiaodou-ui