发布npmjs组件库

一.初始化项目

1.用Vite创建空项目

2.安装打包与声明文件插件
复制代码
pnpm i -D vite-plugin-dts sass

二.首先修改项目内容

TypeScript 复制代码

// 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

TypeScript 复制代码

// main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).mount('#app')

TypeScript 复制代码

// 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',
    })
}

TypeScript 复制代码

// vite/plugins/index.ts

import 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
}

TypeScript 复制代码

//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'
          }
        }
      }
    }
  }
})

TypeScript 复制代码

// 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"
  }
}

TypeScript 复制代码

// 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"]
}

TypeScript 复制代码

// 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"]
}

TypeScript 复制代码

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