vue组件上传到npm

先要去 npm 官网去注册一个账号

1.创建并配置项目

npm init vue@latest    // 创建新的 Vue 3 项目

这里如果创建不成功，看自己的 node 版本，vue3 好像只支持要 18 以上，没有的话重装 node

Project name: your-project-name
Add TypeScript? Yes
Add JSX Support? No
Add Vue Router for Single Page Application development? No
Add Pinia for state management? No
Add Vitest for Unit Testing? No
Add Cypress for both Unit and End-to-End testing? No
Add ESLint for code quality? Yes
Add Prettier for code formatting? Yes
这一项                              No

// 切换到你项目的文件下，安装依赖
cd your-project-name
npm install

2.安装组件库

npm install ant-design-vue                 // 我这使用的ant

3.main.ts

import { createApp } from 'vue'
import App from './App.vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)
app.use(Antd)
app.mount('#app')

这里写了，则在你的新项目中则不需要去导入 ant，而我们这个就成了独立的了

4.封装组件

// 建议格式   这样可以导出多个组件
components
组件名
hook
types
index.vue
组件名
hook
types
index.vue

5.创建入口文件 index.ts

import { App } from 'vue'
import 组件名 from './components/组件名'

export { 组件名 }

export default {
  install(app: App) {
    app.component('组件名', 组件名)
  },
}

3.配置打包工具

1.vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import dts from 'vite-plugin-dts';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), dts()],
  build: {
    lib: {
      entry: './src/index.ts',
      name: '组件名（大驼峰）',
      fileName: (format) => `组件名(小写-连接).${format}.js`,
    },
    rollupOptions: {
      external: ['vue', 'ant-design-vue'],
      output: {
        globals: {
          vue: 'Vue',
          'ant-design-vue': 'AntDesignVue'
        }
      }
    }
  }
});

2.安装 vite 插件

npm install @vitejs/plugin-vue vite-plugin-dts

4. package.json

{
  "name": "your-package-name", // 包唯一的名称，因为npm是根据包名搜搜的
  "version": "1.0.0",
  "description": "Your package description",
  "main": "dist/组件名(小写-连接).umd.js",
  "module": "dist/组件名(小写-连接).es.js",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "scripts": {
    "build": "vite build"
  },
  "peerDependencies": {
    "vue": "^3.0.0",
    "ant-design-vue": "*" // 适用于任何版本，怕与项目框架版本冲突
  },
  "author": "Your Name",
  "license": "MIT"
}

5.打包，上传

npm login   // 登录
npm build   // 打包
npm publish --access public  // 上传且公共可见