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

一、nmp使用

1、注册nmp账号：npm | Home

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

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

bash 复制代码

npm init

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

javascript 复制代码

{
  // 包名，必须是唯一的，通常与 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

bash 复制代码

npm login 或者 npm adduser

5、更改镜像

查看当前镜像

bash 复制代码

npm config get registry

切换nmp镜像

bash 复制代码

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

6、上传nmp

bash 复制代码

npm publish

7、撤销上次上传

bash 复制代码

npm unpublish --force

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

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

javascript 复制代码

vue3-components--文件夹名

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

2、package.json文件写入：

javascript 复制代码

{
  "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文件写入：

javascript 复制代码

// 组件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组件为例。

css 复制代码

<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插件

css 复制代码

cd vue3-components

npm publish

6、项目使用：

1、vue项目内使用：

css 复制代码

npm install vue3-components@latest

2、全局注册

css 复制代码

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、使用组件

javascript 复制代码

<template>
  <componentA :test="test" />
</template>

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

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

一、nmp使用

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

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