Vite+Vue3+TS打包一个npm组件，并支持IDE的代码提示功能

为了创建一个支持IDE代码提示的Vite + Vue 3 + TypeScript项目，你需要遵循以下步骤：

1. 初始化项目:

npm init vite@latest my-vue-component -- --template vue-ts

2. 进入项目目录:

cd my-vue-component

3. 安装项目依赖:

npm install

4. 修改vite.config.ts以支持库模式:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/main.ts',
      name: 'MyComponent',
      fileName: (format) => `my-component.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理依赖
      external: ['vue'],
      output: {
        // 在 UMD 和 IIFE 格式下使用 'amd' 模块化
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
})

5. 在src目录下创建你的组件文件，例如MyComponent.vue:

<template>
  <div>{{ message }}</div>
</template>
 
<script lang="ts">
import { defineComponent } from 'vue';
 
export default defineComponent({
  name: 'MyComponent',
  props: {
    message: String
  }
});
</script>

6. 在package.json中添加入口文件和类型声明:

{
  "name": "my-vue-component",
  "version": "1.0.0",
  "main": "dist/my-component.umd.js",
  "types": "dist/types/my-component.d.ts",
  // ...
}

7. 构建库:

npm run build

现在你的项目已经设置好了，可以发布到npm上，并且其他开发者可以通过npm安装并使用你的组件，得益于Vite的热模块替换功能，开发过程中也能享受非常良好的开发体验。