向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, // 生產環境下去除consoledrop_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