1.创建项目
npm create vite@latest my-vue-ts-component -- --template vue-ts
可以强制把它变成公开包，发布
npm publish --access public
查看已发布包的元数据
npm view @zhy/map-utils
显示你当前 npm 客户端登录的「用户名」
npm whoami
2. 禁用 allowImportingTsExtensions
如果你不需要强制要求导入路径以 .ts 结尾，可以在 tsconfig.json 中禁用这个选项：
{
"compilerOptions": {
"allowImportingTsExtensions": false
}
}
3.配置 Vite 打包为组件库模式
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: vue(),
build: {
lib: {
entry: path.resolve(__dirname, 'src/index.ts'),
name: 'MyVueTsComponent',
fileName: (format) => `my-vue-ts-component.${format}.js`,
},
rollupOptions: {
external: 'vue',
output: {
globals: {
vue: 'Vue',
},
},
},
},
});
4.确保 package.json 文件包含以下字段
{
"name": "@your-username/my-vue-ts-component",
"version": "1.0.0",
"description": "A Vue 3 + TypeScript component template",
"main": "./dist/my-vue-ts-component.umd.cjs",
"module": "./dist/my-vue-ts-component.es.js",
"files": [
"dist"
],
"peerDependencies": {
"vue": "^3.0.0"
},
"scripts": {
"build": "vue-tsc && vite build"
}
}