NPM环境安装

一、nodejs安装

官网：https://nodejs.org/zh-cn/

1.1、安装nodejs

安装到D:\Java\nodejs\

1.2、打开CMD，检查是否正常

C:\Users\Administrator>node -v
v14.18.1

# node自带npm 但不是最新版
C:\Users\Administrator>npm -v
6.14.15

1.3、自定义目录

在D:\Java\nodejs目录下新建node_global、node_cache文件夹

然后运行以下2条命令

npm config set prefix "D:\Java\nodejs\node_global"
npm config set cache "D:\Java\nodejs\node_cache"

1.4、npm的本地仓库

C:\Users\Administrator>npm list -global
D:\Java\nodejs\node_global
`-- (empty)

1.5、 配置镜像站

npm config set registry=http://registry.npm.taobao.org

1.6、显示所有配置信息

C:\Users\Administrator>npm config list
; cli configs
metrics-registry = "http://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.14.15 node/v14.18.1 win32 x64"

; userconfig C:\Users\Administrator\.npmrc
cache = "D:\\Java\\nodejs\\node_cache"
prefix = "D:\\Java\\nodejs\\node_global"
registry = "http://registry.npm.taobao.org/"

; builtin config undefined

; node bin location = D:\Java\nodejs\node.exe
; cwd = C:\Users\Administrator
; HOME = C:\Users\Administrator
; "npm config ls -l" to show all defaults.

1.7、查看npmrc

使用使用文本编辑器打开C:\Users\Administrator.npmrc文件

可以看到刚才的配置信息

prefix=D:\Java\nodejs\node_global
cache=D:\Java\nodejs\node_cache
registry=http://registry.npm.taobao.org

1.8、检查一下镜像站行不行命令

## 方式1
npm config get registry

## 方式2
npm info vue 

1.9、更新npm

## npm install 安装或更新命令
## npm 模块名称
## -g 意思是安装到global（D:\Java\nodejs\node_global）目录下
npm install npm -g

npm -v 

可以看到npm升级了

默认的模块D:\Java\nodejs\node_modules 目录改为D:\Java\nodejs\node_global\node_modules 目录，直接运行npm install等命令会报错的，我们需要增加环境变量NODE_PATH 内容是：D:\Java\nodejs\node_global\node_modules

二、webpack安装步骤

webpack -v

会出现“‘webpack’ 不是内部或外部命令，也不是可运行的程序或批处理文件”，两个最主要的原因：

1. 环境变量的配置

   运行的时候出现“webpack’不是内部或外部命令，也不是可运行的程序或批处理文件”错误，这时我们要想到配置环境变量

   在Path中添加：D:\Java\nodejs\node_global

2. cli的安装（如果webpack4+版本都需要安装cli，因为webpack 4将 cli 分离出来了）

2.1、本地安装

1. 安装webpack：npm install webpack --save-dev
2. 安装cli：npm install webpack-cli --save-dev
   本地安装可以使我们在引入破坏式变更的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules目录中查找安装的 webpack;当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。

2.2、全局安装

1. 安装webpack：npm install webpack -g
2. 安装cli：npm install webpack-cli -g
   全局安装会将项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败

配置环境变量之后，需要进行其它操作需要重新打开CMD让上面的环境变量生效

三、测试NPM安装vue.js

## -g是指安装到global全局目录
npm install vue -g

vue -V

D:\Java\nodejs\node_global\node_modules目录中就多了个npm

四、测试NPM安装vue-router

npm install vue-router -g

五、安装vue脚手架

## vue-cli 1.x和2.x
npm install vue-cli -g

## vue-cli 3.x 推荐使用
npm install -g @vue/cli

关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

## 检查其版本是否正确
vue --version

## 或者
vue -V

六、测试

vue-cli工具是内置了模板包括 webpack 和 webpack-simple,前者是比较复杂专业的项目，他的配置并不全放在根目录下的 webpack.config.js 中。

## 切换到D:\Web下
d:
cd Web

创建一个项目

vue create hello-world

初始化，安装依赖

## 进入目录
cd hello-world

## 安装
npm install 

运行项目

npm run serve

浏览器访问：http://localhost:8080/

生成静态文件，存放在项目的dist文件夹

npm run build