vue3组件库

目录结构

1、修改src为examples

2、新建、配置vue.config.js

3、新建packages、新建packages/tyx-table/index.vue

4、index.vue是一个组件，name必须有

5、tyx-table下新建index.ts用作导出组件（按需引入需要，不做按需引入则不用）

6、packages下新建index.ts用作导出组件库

7、main.ts引入测试

8、配置打包信息

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx({})],
  build: {
    rollupOptions: {
      // 请确保外部化那些你的库中不需要的依赖
      external: ['vue'],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          vue: 'Vue',
        },
      },
    },
    lib: {
      entry: './packages/index.ts',
      name: 'vue3-table',
    },
  },
})

npm install @vitejs/plugin-vue-jsx -D

9、npm run build

打包后可以在main.ts中测试是否能用

查看第7步

10、package.josn配置发布信息

{
  "name": "tyx-ui",
  "version": "0.1.0",
  "files": [
    "dist/*",
    "tyx-ui.d.ts"
  ],
  "main": "dist/tyx-ui.umd.cjs",
  "module": "dist/tyx-ui.js",
  "private": false,
  "type": "module",
  "author": {
    "name": "tyx",
    "email": "tyx243756769@163.com"
  },
  "license": "ISC",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.7.8",
    "vue": "^3.4.31"
  },
  "devDependencies": {
    "@types/node": "^22.1.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vitejs/plugin-vue-jsx": "^4.0.0",
    "typescript": "^5.2.2",
    "vite": "^5.3.4",
    "vue-tsc": "^2.0.24"
  }
}

11、根目录下npm login && npm publish

会超时，一直访问，直到成功

其他问题：

文件 "...packages/index.ts" 不在项目 ".../tsconfig.app.json" 的文件列表中。项目必须列出所有文件，或使用 "include" 模式。

解决：tsconfig.app.json中配置include

{
  "compilerOptions": {
    ...
  },
  "include": ["packages/**/*.ts","**/*.vue","examples/**/*.ts", "examples/**/*.tsx", "examples/**/*.vue"]
}

--------------------------------------------------------------------------------------

npm login || npm publish超时

第一步：执行npm config set proxy false
第二步：执行npm login -d 或 npm publish -d
注意：第二步的命令执行前都需要执行一次第一步命令

有点忘了，想起来啥补充啥吧