关于vue.js:从零开始用elementui躺坑vue-npm

npm: node package manager, 翻译成中文就是node 包管理工具。随着 Node.js 的火爆，应用 npm 共享 js 代码曾经成为每个前端开发者的必备工具。但就现状而言：一部分开发者还只是停留在 npm install 层面。更有甚者，一言不合就开删, rm -f node_modules。明天就让小编带你去理解 npm 的基本原理和实际。

1. npm init

初始化 package.json 文件，生成 name，version，script 等字段。具体阐明举荐 npm 的 package.json 中文文档

2. npm install

依赖治理 是 npm 的核心内容。原理是执行 npm install 从 package.json 中装置依赖。

npm install \<package\> 后，咱们能够在 node_modules 中查看装置的依赖包。尽管开发者只需关注业务中的援用依赖即可。

这是开发者最罕用的指令，clone 我的项目或者新建必须的第一个指令。

3. npm –save-dev 与 npm –save

–save || -S：运行依赖（公布）, 将包信息增加到dependencies，是须要公布到生产环境的。

–save-dev || -D:开发依赖（辅助），将包信息增加到devDependencies，只用于开发环境

装置依赖时如何判断？官网说法是：–save-dev 咱们只在开发时才用失去它，生产部署后则不执行。–save：咱们在开发实现后，必定还要依赖他们，否则就用不了。简略的说：就是如果没有该依赖则程序就跑不起来，则必须应用 –save。如 vue-router. 如果该依赖只是为了编译、构建、生成文档则应用 –save-dev

4. package-lock.json

package-lock.json 文件的作用是 锁定装置时的包的版本号。

4.1 ^: 主版本号管制

^ 是 npm 默认的版本符号，举个例子

"requires": {
  "graceful-fs": "^4.1.2",
  "inherits": "~2.0.0",
  "mkdirp": ">=0.5 0",
  "rimraf": "2"
}

这个符号定义了 向后（新）兼容依赖 ，通知 npm 能够装置 8.0.33 或者一个大于它的版本，然而 次要版本 为 4.x.x 的版本

4.2 ~：次版本号管制

~ 是 次版本号管制，举个例子

"requires": {
  "graceful-fs": "^4.1.2",
  "inherits": "~2.0.0",
  "mkdirp": ">=0.5 0",
  "rimraf": "2"
}

与 ^ 的区别是，～版本只能规定 次版本号 2.0.x，仅仅是作用域不同而已

4.3 >: beta 版本

指定了能够装置的 beta 版本。能够了解为大于或等于。如：0.5.1

因而，当咱们应用 npm install 会依据 package-lock.json 文件进行装置，保障不同环境、不同工夫下当依赖是一样的。而不是依据 package.json 文件。因为 pacakge-lock.json 给每个依赖都表明了版本、获取地址、哈希值，所以，每次装置都是同一个雷同的后果。不论你在什么机器下面或者什么时候装置。

基于此，咱们手动更改 package.json 文件装置将不会更新包，想要更新则必须 指定版本号。如：npm install axious@3.2.0 –save-dev, 这种形式来版本更新 package-lock.json 则能够。

谨记：不要手动批改package-lock.json

5. 依赖治理

1. 不要手动批改 package-lock.json 文件
2. 我的项目组成员首次 checkout / clone 我的项目代码时，应手动 npm install 一下，确保同步依赖
3. 小版本升级依赖，能够应用 npm update
4. npm uninstall <package> 删除依赖包
5. 任何我的项目组成员在更新 package.json, package-lock.json 文件后，项目组其余成员应从新拉取，并应用 npm install 同步更新依赖

6. npm scripts

{
 "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js"
  }
}

在 vue 我的项目中，npm run dev能够说是咱们最常见的命令了，兴许咱们素来都没有过这条脚本命令的原理。明天就让小编初窥一二。详情能够参考阮一峰的 npm scripts 使用指南

上述代码是 package.json 文件的一个片段，外面的 scripts 字段是一个对象。它的每一个 属性 ，对应一段 脚本。比方 npm run dev 命令对应的脚本就是 webpack-dev-server –inline –progress –config build/webpack.dev.conf.js。

npm 的脚本原理非常简单，每当执行 npm run，就会主动创立一个 shell，比拟特地的是，npm 新建的这个 shell，会将node_modules/.bin 子目录退出 path 变量，执行完结后，在将 PATH 复原原样。

这意味着，当前目录的 node_modules/.bin 子目录外面的所有脚本，都能够间接用脚本名调用，而不用加上门路。

7. npm 装置失败解决办法

当 clone 或者初始化我的项目时，npm i 报错时，不要心急，尝试以下 4 大步骤，定能搞定

1. 先删除 node_modules 文件夹
rm -rf node_modules
2. 清理 npm 缓存
npm cache clean --force
3. 独自装置失败的 npm（这是一步到位的方法。当然也可省略该步骤，间接跳到步骤 4 —- 不倡议省略）
npm i xx
4. 装置残余的 npm
npm i

留神：

1. 请 审慎手动删除 package-lock.json 文件 ，而后 npm i 操作，尽管该办法能解决绝大多数 npm i 装置失败问题，但会造成 npm 依赖树 谬误，尤其是多人合作开发时，会呈现测试环境运行失常，打包上线后不能工作的问题
2. 尽可能的不必 cnpm，因为会漏掉很多依赖，会产生各种莫名其妙的问题

8. 参考文献

1. npm: package.json
2. 阮一峰的 npm scripts 使用指南