npm上传自己封装的插件（vue+vite）

一、npm账号及发包删包等命令

若没有账号，可在npm官网：https://www.npmjs.com/login 进行注册。
在当前项目根目录下打开终端命令窗口，常见命令如下：
1、登录命令：npm login（不用每次都重新登录，失效了再登）
2、首次登录：npm adduser
注：根据提示依次输入：用户名、密码（输入内容不展示）、邮箱、邮箱验证码。
3、发包命令：npm publish
注：同一个包不能重复发布同一个版本，每次发布需要修改版本号。
4、删包命令：npm unpublish 包名 --force（例：npm unpublish plugins --force）
注：只能删除72小时以内发布的包，且删除的包24小时内不允许重复发布，执行失败可能是网络不好，重新执行下又可以了。
5、删除指定版本：npm unpublish 包名@版本号 --force（例：npm unpublish plugins@1.0.0 --force）
注：会自动回退到上个版本，删除后不可再上传相同的该版本号。
6、查看所有的版本：npm view 包名 versions（例：npm view plugins versions）
注：删除的版本将不再展示。

执行npm publish可能遇到的报错：
1、403 Forbidden - PUT https://registry.npmjs.org/plugins - You do not have permission to publish “plugins”. Are you logged in as the correct user?
解：因为plugins包名已经存在，不是作者没有权限修改已经存在的包，需要换个包名。
2、400 Bad Request - PUT https://registry.npmjs.org/myPlugins - “defPlugins” is invalid for new packages.
解：包名不支持驼峰命名，把myPlugins换成my-plugins就行了。

二、vue项目打包及插件发布相关配置

1、单个插件发布
例如在/src/packages/test123/index.vue中开发需要上传的插件
vite.config.js文件打包配置

import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({build: {outDir: 'dist',lib: {entry: resolve(__dirname, "./src/packages/test123/index.vue"), // 文件路径name: 'test123',fileName: 'test123.min' // 打包后生成的文件名},rollupOptions: {external: ['vue'],output: {globals: {vue: 'Vue'}}}}
})

注：打包后dist文件夹会自动生成test123.min.js、style.css这两个下方需要用到的文件。
package.json文件配置

{"name": "test123", // 发布插件的名称"private": false, // 是否私有，设置为false"version": "1.0.0", // 发布的版本号"type": "module","main": "dist/test123.min.js", // 插件入口文件"style": "dist/style.css","files": ["dist"],"scripts": {...},"dependencies": {...},"devDependencies": {...}
}

注意：npm发布包或版本根据package.json中配置信息来决定，vite.config.js文件中的build配置只是为了打包生成dist。所以如果只是修改包名或者版本号不需要重新打包，直接修改json文件对应的信息即可。

项目应用：
安装依赖：npm i test123 --save
页面使用：

<script>import test from 'test123'; import 'test/style.css'; // 可根据下面注意省略此行
</script>
<template><test></test>
</template>

注意：可以在插件发布之前在dist/test123.min.js文件中加import ‘./style.css’;这行引入代码，这样就不用在每次使用的时候都单独引入插件css文件了。

2、多个插件批量发布
例如在/src/packages文件下创建多个.vue文件，并在/src/packages/index.js文件中批量注册：

import test123 from './test123/index.vue';
import test456 from './test456/index.vue';
const myCompList = [test123, test456];
// 批量注册组件
const install = function (Vue) {myCompList.forEach(comp => {Vue.component(comp.name, comp);})
}
export default install;

vite.config.js文件打包配置

import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({build: {outDir: 'dist',lib: {entry: resolve(__dirname, "./src/packages/index.js"),name: 'my-plugins',fileName: format => `my-plugins-${format}.js`},rollupOptions: {external: ['vue'],output: {globals: {vue: 'Vue'}}}}
})

package.json文件配置

{"name": "my-plugins","private": false,"version": "0.0.1","type": "module","main": "dist/my-plugins-es.js","style": "dist/style.css","files": ["dist"],"scripts": {...},"dependencies": {...},"devDependencies": {...}
}

项目应用：
安装依赖：npm i my-plugins --save
main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import myPlugins from 'my-plugins';
import 'my-plugins/dist/style.css';
createApp(App).use(myPlugins);

页面使用：(不需要再单独引入插件test123、test456）

<template><test123></test123><test456></test456>
</template>

三、关于README.md文档编写

README.md是一个使用Markdown格式编写的文本文件，通常用于描述软件项目、库或文档的基本信息。‌
下图借用百度搜索结果：