前端：最简单封装nmp插件（组件）过程。

一、nmp使用

1、注册nmp账号：npm | Home

2、创建插件名称文件夹，如： vue3-components

3、初始化一个package.json文件：nmp init 

npm init

package.json配置用处介绍，如下：

{// 包名，必须是唯一的，通常与 GitHub 仓库名一致"name": "XXXXX",// 当前包的版本号，遵循语义化版本控制（SemVer），每次上传都需要改版本号，且要大于上次版本号"version": "1.0.0",// 简短描述，用于 npm 网站上的包介绍"description": "仅供测试，别下载",// 入口文件，指定 Node.js 加载模块时的入口点"main": "index.js",// 脚本命令集合，可以通过 npm run <script-name> 执行"scripts": {// 默认的测试脚本，这里只是简单地输出错误信息并退出"test": "echo \"Error: no test specified\" && exit 1"},// 作者信息，可以是一个字符串或对象"author": "###",// 指定包含在发布的包中的文件列表"files": ["dist",  // 编译后的文件目录"src"    // 源代码目录],// 许可证类型，ISC 是一种简化的 BSD 许可证"license": "ISC",// 是否为私有包，如果为 true，则不会发布到 npm 注册表"private": false,// 生产环境依赖项，运行时需要的包"dependencies": {},// Git 仓库信息，包括类型和 URL"repository": {"type": "git","url": "https://github.com/dengzemiao/DZMFullPage.git"},// 错误报告链接，用户可以在这里提交问题"bugs": {"url": "https://XXXX"},// 主页链接，通常是项目的 GitHub 页面或官方网站"homepage": "https://XXXX",// 浏览器兼容性配置，用于工具如 Babel 和 Autoprefixer"browserslist": ["> 1%",      // 全球使用率大于 1% 的浏览器"last 2 versions",  // 最新的两个版本"not ie <= 8"      // 不支持 IE8 及以下版本],// 关键字列表，有助于在 npm 上搜索相关包"keywords": ["测试"]
}

4、登陆 nmp 

npm login 或者 npm adduser 

5、更改镜像

查看当前镜像

npm config get registry

切换nmp镜像

npm config set registry https://registry.npmjs.org/

6、上传nmp

npm publish

7、撤销上次上传

npm unpublish --force

二、正式封装 与 使用（最简单vue3为例 ）

1、vue3-components文件夹，按目录创建：

vue3-components--文件夹名├── doc -- 文档目录
├    ├── img -- 截图
├    └── README.md -- 部分项目示例
├── src -- 源代码目录
├    ├── assets -- icn、图片资源
├    ├── components -- 自定义组件
├    ├      ├── componentA--组件A
├    ├      └── componentB--组件B
├    └── index.js -- 入口文件
├── package.json -- nmp上传文件
└── README.md -- 插件介绍文档

2、package.json文件写入：

{"name": "vue3-components","version": "0.0.1","description": "A plugin with multiple components using ElementPlus","main": "src/index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": ["vue","element-plus","components",],"author": "Your Name","license": "MIT","dependencies": {"element-plus": "^2.3.0","vue": "^3.2.47",}
}

3、index.js文件写入：

// 组件A
import componentA from "./components/componentA.vue";
// 组件B
import componentB from "./components/componentB.vue";// 只包含实际的组件，并为每个组件指定默认名称
const components = [{ component: componentA, defaultName: "componentA" },{ component: componentB, defaultName: "componentB" },
];const install = (app) => {components.forEach(({ component, defaultName }) => {const componentName = component.name || component.__name || defaultName;if (componentName) {app.component(componentName, component);} else {console.warn(`组件注册失败：无法确定组件名称`, component);}});
};// 导出资源
export { componentA，componentB };// 导出插件
export default install;

4、componentA和componentB写入封装的项目。以componentA组件为例。

<template><div class="test">{{ props.test }}</div>
</template>
<script setup>
const props = defineProps({ test: { type: String, required: true } });
</script>
<style scoped>
.test {color: red;
}
</style>

5、上传nmp插件

cd vue3-componentsnpm publish

6、项目使用：

  1、vue项目内使用：

npm install vue3-components@latest

2、全局注册

import { createApp } from 'vue'
const app = createApp(App)// 引入 ElementPlus 相关样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'; // 引入 sdno-log-view 日志 组件
import vueComponents from 'vue3-components'// 注册  
app.use(ElementPlus)
app.use(vueComponents)

3、使用组件

<template><componentA :test="test" />
</template><script setup>
import { ref } from "vue";
const test = ref('测试')
</script>