基于vite + Vue3.2 组件开发 并发布 npm 包

新建vite 项目就不多说了

目录结构

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

而在 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 上发布的包名一致，否则也会推送不到npmname: "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 你的包名

全部引入

按需加载