創(chuàng)建項(xiàng)目

npm init vite@latest。選項(xiàng)依次選擇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: {
      // 確保外部化處理那些你不想打包進(jìn)庫(kù)的依賴
      external: ['vue'],
      output: {
        // 在 UMD 構(gòu)建模式下為這些外部化的依賴提供一個(gè)全局變量
        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. 運(yùn)行yarn build命令
2. 運(yùn)行npm login命令登錄npm賬號(hào)（需要提前注冊(cè)），并且npm鏡像要為默認(rèn)源，否則登錄不上去
   設(shè)置默認(rèn)源
   npm config set registry https://registry.npmjs.org
3. 運(yùn)行npm publish命令發(fā)布包，不能重名，如果重名修改package.json中的name

使用組件

yarn add vue3-image-viewer

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

注意事項(xiàng)

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