vue3.2+Ts+Vite 简单发布一个自己的npm组件

先创建一个新的项目

npm create vite

 cd jack-base-ui
 npm i // 安装好依赖

我这里把不用的文件先清空，一会直接在app.vue做示例

在根目录下创建一个packages的文件夹，管理自己的组件

 index.ts用来安装组件，并进行默认导出

button文件是我们要进行封装的组件

import { App } from 'vue'
import LButton from './button/index.ts' // 引入我们封装的组件

const install = (app:App) => {  // 进行注册
  app.use(LButton)
}

const LUI = {
  install
}

export {  // 按需导出
  LButton
}

export default LUI // 默认全部导出

button文件夹目录

//index.ts

import { App } from 'vue'

import LButton from './index.vue'

LButton.install = (app:App) => {
  app.component(LButton.name, LButton)
}

export default LButton

<template>
  <div class="">
    <button>
      <slot></slot>
    </button>
  </div>
</template>

<script>
export default {
  name: 'LButton'  // 注册的时候会用到
}
</script>

<script lang="ts" setup>
  
</script>

<style lang="scss" scoped>

</style>

main.ts中简单测试下

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import LUI from '../packages/index'

createApp(App).use(LUI).mount('#app')

 ok，没有问题

先修改下vite.config.ts配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './packages/index.ts', // 打包路径
      name: 'jack-base-ui'
    },
    rollupOptions: {
      external: ["vue"],
      output: {
        globals: {
          vue: "Vue"
        }
      }
    }
  }
})

然后先npm run build,打包成功之后进行package.json的配置,直接复制分割线中间的内容，dist下面的名称修改成自己的名称  umd.cjs 不能随便修改 

Tips如果打包报错导入路径不能以“.ts”扩展名结束。暂时先把文件改成js文件，之后有解决方案再更新

{
  "name": "jack-base-ui",
  "private": false,
  "version": "0.0.1",
  "type": "module",
**********删除分割线***************
  "main": "./dist/jack-base-ui.umd.cjs",
  "module": "./dist/jack-base-ui.js",
  "exports": {
    "*": {
      "import": "./dist/jack-base-ui.js",
      "require": "./dist/jack-base-ui.umd.cjs"
    }
  },
  "files": ["dist/*"],
**********删除分割线***************
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.0.3",
    "typescript": "^4.6.4",
    "vite": "^3.0.7",
    "vue-tsc": "^0.39.5"
  }
}

发布npm  tips:一定要使用npm 的源  不能使用淘宝镜像 否则 报错403

npm config set registry https://registry.npmjs.org/   // npm 镜像


npm config set registry https://registry.npm.taobao.org  // 淘宝 镜像

1.npm adduser

用户名 密码 邮箱 邮箱验证码

2. npm login  

输入刚才的 用户名 密码 邮箱 验证码

3.npm publish 发布

发布的时候403 有可能是名字重复注意一下

 发布成功，然后再项目中直接npm i 自己的npm包名，然后 main.ts 进行导入