Vue3 + Vite + TypeScript 基础组件库发布 npm & Volar 类型提示

要将自己封装的基础组件库发布到npm，并支持Volar提供的TS类型提示功能，可以按照以下步骤进行操作：\n\n1. 创建基础组件库项目：使用Vue CLI创建一个新的Vue项目，并选择TypeScript作为项目的语言。\n\nbash\nvue create my-component-library\n\n\n2. 开发基础组件：在项目中创建基础组件，并使用TypeScript进行开发。确保每个组件都有正确的类型定义。\n\n3. 配置Vite：在项目根目录下创建一个vite.config.ts文件，并配置Vite以支持TypeScript和Vue。\n\ntypescript\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\nexport default defineConfig({\n plugins: [vue()],\n});\n\n\n4. 配置Volar：在项目根目录下创建一个jsconfig.json文件，并配置Volar以支持TS类型提示。\n\njson\n{\n "include": ["src/**/*.vue", "src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", "tests/**/*.tsx"],\n "exclude": ["node_modules", "dist"]\n}\n\n\n5. 构建组件库：使用Vite构建组件库，并将构建后的文件输出到dist文件夹。\n\nbash\nvite build\n\n\n6. 配置package.json：在package.json文件中添加必要的字段，比如name、version、main、module等。注意，main字段应该指向构建后的入口文件，而module字段应该指向原始的ES模块文件。\n\njson\n{\n "name": "my-component-library",\n "version": "1.0.0",\n "main": "dist/index.js",\n "module": "dist/index.es.js",\n ...\n}\n\n\n7. 发布到npm：运行以下命令将组件库发布到npm。\n\nbash\nnpm publish\n\n\n8. 安装和使用：在其他项目中使用npm安装你的组件库，并在代码中引入和使用你的组件。\n\nbash\nnpm install my-component-library\n\n\njavascript\nimport { MyComponent } from 'my-component-library';\n\n// 使用MyComponent组件\n\n\n通过以上步骤，你就可以将自己封装的基础组件库发布到npm，并且使用Volar提供的TS类型提示功能。