发布npmjs组件库

一.初始化项目

1.用Vite创建空项目

2.安装打包与声明文件插件

pnpm i -D vite-plugin-dts sass

二.首先修改项目内容

// src\index.ts
import { type App } from 'vue';
import oneComponent from "./components/oneComponent/index.vue";
import twoComponent from "./components/twoComponent/index.vue";export { oneComponent,twoComponent } //实现按需引入*
oneComponent.name='oneComponent';
twoComponent.name='twoComponent';
const components = [oneComponent,twoComponent];const install = (app: App) => {components.forEach((component) => {app.component(component.name || component.__name || 'unknow', component);});
};
export type { twoComponentOption, twoComponentProps } from './types'export default { install } // 批量的引入*node

// main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')

// vite/plugins/commponent.ts import Components from 'unplugin-vue-components/vite'
export default () => {return Components({ //自动导入 components下的组件dirs: ['src/components'],//自动在types下新建components.d.ts文件并声明公共组件类型dts: 'src/types/components.d.ts',})
} 

// vite/plugins/index.tsimport vue from '@vitejs/plugin-vue';
import commponents from './commponent' 
import dts from 'vite-plugin-dts';
export default (): [] => {const vitePlusgins: any = [];vitePlusgins.push(vue({script:{defineModel: true}}));vitePlusgins.push(dts({tsconfigPath:'./tsconfig.app.json',include: ['src/**/*.ts','src/**/*.vue'],exclude:['src/types/components.d.ts'],·outDir: 'dist/types',insertTypesEntry: true,rollupTypes:true}));vitePlusgins.push(commponents()); return vitePlusgins
}

//vite.config.ts
import { type ConfigEnv, defineConfig, type UserConfig } from 'vite'
import createPlugins from './vite/plugins'
import path from 'path'
// https://vite.dev/config/
export default defineConfig(({  }: ConfigEnv): UserConfig => {// const env = loadEnv(mode, process.cwd());return {plugins: createPlugins(),resolve: {alias: {'@': path.resolve(__dirname,'src')}},build:{lib:{entry: path.resolve(__dirname,'src/index.ts'),name: 'MyVue3Lib',fileName: (format) => `my-vue3-lib.${format}.js`},rollupOptions: {external: ['vue'],output: {globals: {vue: 'Vue'}}}}}
})

// package.json{"name": "my-vue3-lib-comlibrary","version": "0.0.2","type": "module","main": "./dist/my-vue3-lib.umd.js","module": "./dist/my-vue3-lib.es.js","types": "./dist/types/index.d.ts","files": ["dist"],"exports": {".": {"types": "./dist/types/index.d.ts","import": "./dist/my-vue3-lib.es.js","require": "./dist/my-vue3-lib.umd.js"},"./dist/my-vue3-lib.css": "./dist/my-vue3-lib.css"},"scripts": {"dev": "vite","build": "vue-tsc -b && vite build","preview": "vite preview","pub": "npm run build && npm publish"},"peerDependencies": {"vue": "^3.5.18"},"dependencies": { "sass": "^1.90.0","vue": "^3.5.18"},"devDependencies": {"@types/node": "^24.2.1","@vitejs/plugin-vue": "^6.0.1","@vue/tsconfig": "^0.7.0","typescript": "~5.8.3","unplugin-auto-import": "^20.0.0","unplugin-vue-components": "^29.0.0","vite": "^7.1.2","vite-plugin-dts": "^4.5.4","vue-tsc": "^3.0.5"}
}

// tsconfig.app.json{"extends": "@vue/tsconfig/tsconfig.dom.json","compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true,"baseUrl": ".","allowJs": true,"paths": {"@/*": ["src/*"]},"allowSyntheticDefaultImports": true,},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

// tsconfig.node.json
{"compilerOptions": {"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo","target": "ES2023","lib": ["ES2023"],"module": "ESNext","skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"verbatimModuleSyntax": true,"moduleDetection": "force","noEmit": true,/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"erasableSyntaxOnly": true,"noFallthroughCasesInSwitch": true,"noUncheckedSideEffectImports": true},"include": ["vite.config.ts"]
}

// tsconfig.ts
{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }]
}