創(chuàng)建項目

npm init vite@latest。選項依次選擇vue和vue-ts

編寫組件

1. 在src下新建packages文件夾，在packages文件夾下新建Image/index.vue文件
   在src下新建export.ts文件，添加內(nèi)容

import Image from './packages/Image/index.vue';
export {
  Image
}

2. 編輯vite.config.ts文件，新增build屬性

  build: {
    lib: {
      entry: path.resolve(__dirname, './src/export.ts'),
      name: 'vue3-image-vue',
      fileName: (format) => `build.${format}.ts`
    },
    rollupOptions: {
      // 確保外部化處理那些你不想打包進庫的依賴
      external: ['vue'],
      output: {
        // 在 UMD 構建模式下為這些外部化的依賴提供一個全局變量
        globals: {
          vue: 'Vue'
        }
      }
    }
  }

3. 編輯package.json文件，增加如下信息

"name": "vue3-image-viewer",
  "version": "3.1.11",
  "files": [
    "dist"
  ],
  "module": "./dist/build.es.ts",
  "main": "./dist/build.umd.ts",
  "exports": {
    ".": {
      "import": "./dist/build.es.ts",
      "require": "./dist/build.umd.ts"
    },
    "./dist/style.css": {
      "import": "./dist/style.css",
      "require": "./dist/style.css"
    }
  },
  "keywords": [
    "vue3",
    "image",
    "viewer",
    "vue",
    "vite",
    "preview",
    "picture",
    "photo"
  ],

打包組件并發(fā)布

1. 運行yarn build命令
2. 運行npm login命令登錄npm賬號（需要提前注冊），并且npm鏡像要為默認源，否則登錄不上去
   設置默認源
   npm config set registry https://registry.npmjs.org
3. 運行npm publish命令發(fā)布包，不能重名，如果重名修改package.json中的name

使用組件

yarn add vue3-image-viewer

import { Image } from "vue3-image-viewer";
import "vue3-image-viewer/dist/style.css"

注意事項

1. 打包時要把app.vue中的內(nèi)容注釋掉并把public中的不相關文件刪除不然容易失敗或者打包進不相關內(nèi)容
2. 每次發(fā)布更新需要更改版本號，X.Y.Z，X為不向下兼容大版本，Y為向下兼容新功能，Z為向下兼容bug修復，所以修改YZ會導致包內(nèi)容不是最新的，修改X后下載包時需要暫停程序重新安裝包
3. 在當前項目中，通過引入dist下面的文件來快速測試
4. 在readme.md文件中添加包的使用說明，將在npm頁面顯示
5. 如果包內(nèi)容沒有更新，嘗試刪除node_modules文件夾，刪除package-lock.json，刪除yarn.lock后重新安裝