新建vite 项目就不多说了

目录结构

button组件 index.js Input组件下的 index.js也是一样的 这里就不一 一截图了

有一个注意点： 组件文件需要提供name，否则打包会失败

而在 packages 下也有一个 index.js 作为引入组件的入口文件

配置完成后

npm build 打包

会多出来一个 dist 目录

package.json 配置

{
  "name": "名称",  //打包的名称
  "private": false,  //私有属性，默认true 我们需要改为false，否则npm发布不了
  "version": "0.0.1", // 版本号
  "main": "./dist/y-ecui.umd.js", // 打包后的入口文件
  "module": "./dist/y-ecui.es.js",
  // 打包后输出
  "exports": {
  //配置所有类型
    ".": {
      "import": "./dist/y-ecui.es.js",
      "require": "./dist/y-ecui.umd.js"
    }
  },
  //检测dist打包目录的所有文件
  "files": [
    "dist/*"
  ],
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "sass": "^1.52.3",
    "vue": "^3.2.25",
    "y-ecui": "^0.0.1"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

vite.config.js 配置

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  // 配置打包入口出口
  build: {
    rollupOptions: {
      external: ["vue"], //打包的时候不需要打包的依赖
      // 打包抛出一个全局方法
      output: {
        globals: {
          vue: "Vue"
        }
      }
    },
    // 入口
    lib: {
      entry: "./packages/index.js",
      // 需要提供一个name 这个名字尽量不和 npm 上发布的包名一致，否则也会推送不到npm
      name: "xxxxxui" 
    }
  }

})

发布npm

必须的：

• npm账号
• 把淘宝镜像切换为 默认的 npm 镜像

npm 发包必须是 淘宝镜像 
    1、查看镜像 npm config get registry 
    2、更换npm 镜像 npm config set registry https://registry.npmjs.org/ 
    3、更换淘宝镜像 npm config set registry http://registry.npm.taobao.org/

在当前项目打开控制台

1、npm login
会让输入：账号、密码、邮箱、执行完这三个会收到 npm 发在自己邮箱的验证码

执行 npm publish

发布成功后 邮箱也会收到npm 发送的邮件提醒

使用

npm i 你的包名

全部引入

按需加载