NPM环境安装

NPM环境安装

• 一、nodejs安装
• • 1.1、安装nodejs
  • 1.2、打开CMD，检查是否正常
  • 1.3、自定义目录
  • 1.4、npm的本地仓库
  • 1.5、 配置镜像站
  • 1.6、显示所有配置信息
  • 1.7、查看npmrc
  • 1.8、检查一下镜像站行不行命令
  • 1.9、更新npm
• 二、webpack安装步骤
• • 2.1、本地安装
  • 2.2、全局安装
• 三、测试NPM安装vue.js
• 四、测试NPM安装vue-router
• 五、安装vue脚手架
• 六、测试

一、nodejs安装

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

1.1、安装nodejs

安装到D:Javanodejs

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

C:UsersAdministrator>node -v
v14.18.1

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

1.3、自定义目录

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

然后运行以下2条命令

npm config set prefix "D:Javanodejsnode_global"
npm config set cache "D:Javanodejsnode_cache"

1.4、npm的本地仓库

C:UsersAdministrator>npm list -global
D:Javanodejsnode_global
`-- (empty)

1.5、 配置镜像站

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

1.6、显示所有配置信息

C:UsersAdministrator>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:UsersAdministrator.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:Javanodejsnode.exe
; cwd = C:UsersAdministrator
; HOME = C:UsersAdministrator
; "npm config ls -l" to show all defaults.

1.7、查看npmrc

使用使用文本编辑器打开C:UsersAdministrator.npmrc文件

可以看到刚才的配置信息

prefix=D:Javanodejsnode_global
cache=D:Javanodejsnode_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:Javanodejsnode_global）目录下
npm install npm -g

npm -v 

可以看到npm升级了

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

二、webpack安装步骤

webpack -v

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

1. 环境变量的配置

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

   在Path中添加：D:Webnodejsnode_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:Javanodejsnode_globalnode_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