文章目录
1. 引言
通过前面的章节,我们基本把Vue的内容过了一遍了,现在拿到一个项目能达到读懂的状态 ,博客文章列表如下,有兴趣的同学可以参阅:
- 《Java程序员从零开始学Vue(01)- 前端发展史》
- 《Java程序员从零开始学Vue(02)- Vue环境搭建、项目创建及运行》
- 《Java程序员从零开始学Vue(03)- Vue开发利器VsCode》
- 《Java程序员从零开始学Vue(04)- VsCode断点调试》
- 《Java程序员从零开始学Vue(05)- 基础知识快速补充(html、css、js)》
- 《Java程序员从零开始学Vue(06)- Vue调试神器(vue-devtools)》
- 《Java程序员从零开始学Vue(07)- Vue第一个程序(MVVM模式的引入)》
- 《Java程序员从零开始学Vue(08)- 基本语法》
- 《Java程序员从零开始学Vue(09)- 事件绑定》
- 《Java程序员从零开始学Vue(10)- Model数据内容双向绑定》
- 《Java程序员从零开始学Vue(11)- 组件详解》
- 《Java程序员从零开始学Vue(12)- Axios异步通信》
- 《Java程序员从零开始学Vue(13)- 计算属性(computed)》
- 《Java程序员从零开始学Vue(14)- 插槽(slot)》
- 《Java程序员从零开始学Vue(15)- 事件内容分发($emit)》
- 《Java程序员从零开始学Vue(16)- 模块打包器(webpack)》
- 《Java程序员从零开始学Vue(17)- 路由(vue-router)》
- 《Java程序员从零开始学Vue(18)- 集成UI框架(ElementUI)》
- 《Java程序员从零开始学Vue(19)- 嵌套路由(ElementUI)》
- 《Java程序员从零开始学Vue(20)- 参数传递(:to)》
- 《Java程序员从零开始学Vue(21)- 自定义404页面&路由模式》
- 《Java程序员从零开始学Vue(22)- 路由钩子》
在前面的文章,我们都使用到了npm,并没有文章专门的讲述,本文专门的来详细讲解。
2. npm详解2.1 什么是npm
npm是一个包管理器(Package Manager)。
- npm 最初它只是被称为Node Package Manager,用来作为Node.js的包管理器。
- 随着其它构建工具(webpack、browserify)的发展,npm已经变成了 “the package manager for JavaScript”
- 它用来安装、管理和分享JavaScript包,同时会自动处理多个包之间的依赖。
2.2 安装与升级npm
- 安装方式:新版的Node.js已经集成了npm,所以安装了Node.js就相当于安装了npm,下载安装地址 https://nodejs.org/en/download/
- 升级方式(使用命令):npm install npm -g
2.3 国内cnpm
因为使用npm下载依赖包时,网络会很慢,所以在使用npm安装JS包之前建议先更改npm的镜像。解决方案是是配置 npm 的国内镜像站点为:https://registry.npm.taobao.org。
- 方法一:在系统的HOME目录新建.npmrc文件并添加 registry = https://registry.npm.taobao.org
- 方法二:你可以使用淘宝定制的cnpm命令行工具代替默认的npm:,如下:
npm install -g cnpm --registry=https://registry.npm.taobao.org //之后即可使用cnpm来安装包 cnpm install <包>
2.4 包安装方式
npm 的包安装分为本地安装(local)、全局安装(global)两种。
2.4.1 本地local安装
进入项目目录,然后执行如下命令:
npm install <包> # 本地安装 # 或者 npm i <包>
这样会将安装包放在./node_modules 下(运行npm 命令时所在的目录),如果没有node_modules目录,会在当前执行 npm命令的目录下生成 node_modules目录。
当然可以通过 require() 来引入本地安装的包。
2.4.2 全局global安装
可以直接在命令行里使用,这是使用全局安装的主要原因,命令如下:
npm install <包> -g # 全局安装
将安装包放在 /usr/local 下或者你 node 的安装目录。
使用下面的命令来查看全局的包安装的位置:
npm prefix -g
2.4.3 兼容本地和全局
如果你希望具备两者功能(本地安装和全局安装的功能),则需要在两个地方安装它或使用 npm link。
npm link的功能是在本地包和全局包之间创建符号链接。我们说过使用全局模式安装的包不能直接通过require 使用,但通过npm link 命令可以打破这一限制。
比如我们将 express安装到了全局环境,使用下面的命令可以将其链接到本地环境:
npm link express
使用 npm link命令还可以将本地的包链接到全局。使用方法是在包目录( package.json 所在目录)中运行npm link 命令。
如果你的项目不再需要该模块,可以在项目目录内使用npm unlink命令,删除符号链接。
像gem 或 pip 总是以全局模式安装,使包可以供所有的程序使用,而 npm 默认会把包安装到当前目录下。这反映了 npm 不同的设计哲学。如果把包安装到全局,可以提高程序的重复利用程度,避免同样的内容的多份副本,但坏处是难以处理不同的版本依赖。
2.5 package.json
① 当你的项目需要依赖多个包时,推荐使用 package.json,其优点为:
- 它以文档的形式规定了项目所依赖的包
- 可以确定每个包所使用的版本
- 项目的构建可以重复,在多人协作时更加方便
② 创建package.json文件的方式(文件中必须包含name 和 version):
- 手动创建
- 通过 npm init 命令生成遵守规范的 package.json文件
③ package.json 可以指定依赖包,其中有两种依赖方式,(当然你也可以在文件中手动添加依赖):
- dependencies: 在生产环境中需要依赖的包。通过npm install <packge> --save命令自动添加依赖到文件(或者使用简写的参数 -S)。
- devDependencies:仅在开发和测试环节中需要依赖的包,通过npm install <packge> --save-dev命令自动添加依赖到文件(或者使用简写的参数-D)。
如果其他人也需要这个项目,只需要把这个 package.json文件给他,然后进行简单的 npm install即可。
2.6 npm 脚本
参考:npm scripts 使用指南 - 阮一峰的网络日志
2.6.1 npm run
package.json文件有一个scripts字段,可以用于指定脚本命令,供npm直接调用。
"scripts": { "lint": "jshint **.js", "test": "mocha test/" }
npm run lint可以运行脚本中的lint命令。npm run test可以运行脚本中的test命令。
npm run命令会自动在环境变量$PATH添加node_modules/.bin目录,所以scripts字段里面调用命令时不用加上路径,这就避免了全局安装NPM模块。
2.6.2 npm start
start和test属于特殊命令,可以省略run:
npm start npm test
如果仅仅使用npm run会列出scripts属性下所有的命令:
npm run
2.7 发布包
在发布之前,首先需要让我们的包符合 npm 的规范,npm 有一套以 CommonJS 为基础包规范,但与 CommonJS并不完全一致,其主要差别在于必填字段的不同。通过使用 npm init可以根据交互问答产生一个符合标准的 package.json。
npm init 运行示例:
$ npm init name: (node) test version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /tmp/node/package.json: { "name": "test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this ok? (yes)
该文件就是一个符合npm规范的package.json文件。这里的index.js作为包的接口。
详情如下:
# 创建帐号: npm adduser #测试是否取得帐号: npm whoami #发布 npm publish #更新包:修改 version字段,再重新发布 #取消发布: npm unpublish
2.8 命令总结
2.8.1 查看命令帮助
npm help <某命令>
2.8.2 列出各命令
npm -l
2.8.3 查看安装信息
安装信息和它们的依赖
//全局安装信息 npm ls -g //列出当前项目中的包 npm ls
2.8.4 卸载包
npm uninstall <包名>
2.8.5 更新包
//更新当前项目中安装的某个包 npm update <包名> //更新当前项目中安装的所有包 npm update //更新全局安装的包 npm update <包名> -g
2.8.6 搜索包
npm search <关键字>
2.8.7 列出npm的配置
npm config list -l
2.8.8 列出bin目录
npm bin
2.8.9 设置默认配置
使用 npm set命令用来设置环境变量。
也可以用它来为npm init设置默认值,这些值会保存在~/.npmrc文件中。
$ npm set init-author-name 'Your name' $ npm set init-author-email 'Your email' $ npm set init-author-url 'http://yourdomain.com' $ npm set init-license 'MIT'
2.8.10 更改全局安装目录
使用npm config命令可以达到此目的。
npm config set prefix <目录>
或者手动在~/.npmrc文件中进行配置:
prefix = /home/yourUsername/npm
更改目录后记得在系统环境变量 PATH中添加该路径:
# .bashrc 文件 export PATH=~/npm/bin:$PATH
2.9 多版本管理器
Node.js 的社区开发了多版本管理器,用于在一台机器上维护多个版本的 Node.js实例,方便按需切换。Node多版本管理器(Node Version Manager,nvm)是一个通用的叫法,它目前有许多不同的实现。这里使用visionmedia/n。n 是一个十分简洁的 Node 多版本管理器。
如果已经安装好npm则可以简单的使用 npm install -g n来安装n。事实上,n并不需要 Node.js 驱动,它只是bash脚本;我们可以在 https://github.com/visionmedia/n 下载它的代码,然后使用 make install命令安装。
n的常用命令:
# 查看帮助 n --help # 安装 6.9.5版本的nodejs。 # 通过 n 获取的 Node.js 实例都会安装在 /usr/local/n/versions/ 目录中(看情况吧) n 6.9.5 # 列出已经安装的 Node.js 。结果中 * 表示默认版本 n # 版本切换,与安装node.js一样 n 6.9.5 # 指明使用某版本的 node.js 执行某脚本(比如 script.js) n use 6.9.5 script.js
- PREFIX=$CUSTOM_LOCATION make install; 自定义n的安装路径(避免使用sudo)
- 自定义node.js的安装路径(通过n安装);通过设置环境变量export N_PREFIX=$HOME
- 自定义 source。(镜像站点)
- 自定义 架构(architecture)
- 如果使用n切换了node.js的版本后,npm没有正确运行,通过运行相关脚本解决。(见 n: working-with-npm)
详细用法见 : n: Node version management
注意:n 无法管理通过其他方式安装的 Node.js 版本实例(如官方提供的安装包、发行版软件源、手动编译),也就说无法管理不是用 n 安装的node.js。
- n 不支持在Windows上使用:“Unfortunately n is not supported on Windows yet”。
- GNVM 是一个简单的 Windows 下 Node.js 多版本管理器。
2.10 npm模块安装机制