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）
注：会自动回退到上个版本，删除后不可再上传相同的该版本号。
执行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格式编写的文本文件，通常用于描述软件项目、库或文档的基本信息。
下图借用百度搜索结果：
