前端：最简单封装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": " github /dengzemiao/DZMFullPage.git" }, // 错误报告链接，用户可以在这里提交问题 "bugs": { "url": " XXXX" }, // 主页链接，通常是项目的 GitHub 页面或官方网站 "homepage": " 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 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 ponent(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-components npm 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>