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:\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’ 不是内部或外部命令，也不是可运行的程序或批处理文件”，两个最主要的原因：
-
环境变量的配置
运行的时候出现“webpack’不是内部或外部命令，也不是可运行的程序或批处理文件”错误，这时我们要想到配置环境变量
在Path中添加：
D:\Java\nodejs\node_global -
cli的安装（如果webpack4+版本都需要安装cli，因为webpack 4将 cli 分离出来了）
2.1、本地安装
- 安装webpack：
npm install webpack --save-dev - 安装cli：
npm install webpack-cli --save-dev
本地安装可以使我们在引入破坏式变更的依赖时，更容易分别升级项目。通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules目录中查找安装的 webpack;当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。
2.2、全局安装
- 安装webpack：
npm install webpack -g - 安装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
