创建项目
npm init vite@latest。选项依次选择vue和vue-ts
编写组件
- 在src下新建packages文件夹，在packages文件夹下新建Image/index.vue文件
在src下新建export.ts文件，添加内容
import Image from './packages/Image/index.vue';
export {
Image
}
- 编辑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'
}
}
}
}
- 编辑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"
],
打包组件并发布
- 运行
yarn build命令 - 运行
npm login命令登录npm账号（需要提前注册），并且npm镜像要为默认源，否则登录不上去
设置默认源
npm config set registry https://registry.npmjs.org - 运行
npm publish命令发布包，不能重名，如果重名修改package.json中的name
使用组件
yarn add vue3-image-viewer
import { Image } from "vue3-image-viewer";
import "vue3-image-viewer/dist/style.css"
注意事项
- 打包时要把app.vue中的内容注释掉并把public中的不相关文件删除不然容易失败或者打包进不相关内容
- 每次发布更新需要更改版本号，X.Y.Z，X为不向下兼容大版本，Y为向下兼容新功能，Z为向下兼容bug修复，所以修改YZ会导致包内容不是最新的，修改X后下载包时需要暂停程序重新安装包
- 在当前项目中，通过引入dist下面的文件来快速测试
- 在readme.md文件中添加包的使用说明，将在npm页面显示
- 如果包内容没有更新，尝试删除node_modules文件夹，删除package-lock.json，删除yarn.lock后重新安装
