NPM 详解 - 技术栈

NPM，全称 Node Package Manager，是 Node.js 的包管理器，用于安装、分享、发布 JavaScript 代码和软件包。通过 NPM，开发者可以方便地访问数以百万计的开源代码包，以及管理项目所需的依赖项。

使用 NPM，开发者可以执行以下操作：

安装依赖项 ：可以通过 npm install 命令安装项目所需的依赖项，这些依赖项会被记录在项目的 package.json 文件中。
管理依赖项 ：NPM 提供了一系列命令，如 npm install、npm update、npm uninstall 等，用于管理项目的依赖项，包括安装、更新和卸载。
发布和分享包：开发者可以使用 NPM 将自己的代码包发布到 NPM 的全球软件注册表中，从而使其他开发者能够方便地访问并使用这些包。
版本管理：NPM 使用语义化版本控制（Semantic Versioning）对软件包进行版本管理，开发者可以根据需要指定软件包的依赖版本。
脚本执行 ：在 package.json 文件中，开发者可以定义自定义的脚本，例如构建、测试等，并通过 NPM 运行这些脚本。

总的来说，NPM 是 JavaScript 生态系统中的核心组件之一，为开发者提供了丰富的工具和资源，帮助他们更轻松地管理和分享代码。

package.json 详细

package.json 是 Node.js 项目中的一个重要文件，用于描述项目的元数据和依赖项信息。它通常位于项目的根目录下，是一个 JSON 格式的文件，包含了项目的名称、版本、描述、入口文件、依赖项等信息。

以下是 package.json 文件中可能包含的一些常见字段及其含义：

name：项目的名称，必须是唯一的，用于标识项目。
version ：项目的版本号，采用语义化版本规范（Semantic Versioning）进行管理，格式为 X.Y.Z，其中 X 表示主版本号、Y 表示次版本号、Z 表示修订版本号。
description：项目的描述信息，简要说明项目的用途和特点。
main：指定项目的入口文件，即 Node.js 模块系统中的主模块。
scripts ：定义一些自定义的命令和脚本，可供开发者在命令行中运行，常见的如 start、test 等。
dependencies：项目的生产环境依赖项，指定了项目运行所需的第三方包及其版本号。
devDependencies：项目的开发环境依赖项，指定了仅在开发过程中需要用到的第三方包及其版本号。
peerDependencies ：指定了项目的 peer 依赖，即对其他包的版本有要求，但不在项目的 node_modules 目录中安装这些依赖。
keywords：关键字数组，描述项目的关键特征，有助于让其他开发者快速了解项目。
author：项目的作者信息，可以是个人或组织。
license：项目的许可证信息，指定了项目的开源许可证类型，如 MIT、Apache-2.0 等。
repository：指定项目的代码仓库信息，通常包含 URL 和类型。

package.json 文件的内容可以根据项目的实际情况进行定制和修改，其中 name、version 和 dependencies 是必须的字段，其他字段根据需要进行添加或修改。正确配置和维护 package.json 文件能够提高项目的可维护性和可重用性，同时也有助于其他开发者更好地理解和参与到项目中来。

示例在vue 项目中我们需要使用 vue-drag-resize 用于实现可拖拽和可调整大小的元素。

1 安装：

在项目目录下使用 npm 或 yarn 安装 vue-drag-resize

javascript 复制代码

npm install vue-drag-resize --save

如果需要指定版本

javascript 复制代码

npm install vue-drag-resize@1.4.2

在vue中是使用示例

javascript 复制代码

<template>
  <div id="app">
    <vue-drag-resize
      :w="100"
      :h="100"
      :x="100"
      :y="100"
      :z-index="1"
      :isDraggable="true"
      :isResizable="true"
      @dragging="onDragging"
      @resizing="onResizing"
    >
      <!-- 放置你需要拖拽和调整大小的内容 -->
      <div style="width: 100%; height: 100%; background-color: lightblue;"></div>
    </vue-drag-resize>
  </div>
</template>

<script>
import VueDragResize from 'vue-drag-resize';

export default {
  name: 'App',
  components: {
    VueDragResize,
  },
  methods: {
    onDragging(pos) {
      console.log('Dragging:', pos);
    },
    onResizing(size) {
      console.log('Resizing:', size);
    },
  },
};
</script>