01_Node 和 Vue 的安装与配置详解(保姆级教程)

Node 和 Vue 的安装与配置详解

1、安装配置 Nodejs

Node:官方网站: Node.js

百度网盘： Node.js

提取码：yyds

1.1 Node安装配置

1.1 进入node官网下载安装包

选择适合自己的版本，推荐LTS，长久稳定版本。 我这里选择的是Windows Installer(.msi) 64-bit

1.2 下载好后，双击下载的安装包。点next

1.3 勾选我同意，点next

1.4 选择自己的安装路径 点next

1.5 默认，直接点next

1.6 不勾选 直接下一步

1.7 安装 Install

1.8 完成 点击 Finish

安装完成后，检查一下是否安装成功，打开cmd，输入如下指令。

1.9 测试：
node -v 查看node的版本
npm -v 查看npm的版本

输出了版本号就说明安装成功了！

安装完后的目录

1.2 创建全局安装目录和缓存日志目录

​ 1、在此目录下创建 node_global，node_cache两个文件夹

2、 管理员运行cmd 执行命令 配置全局安装的模块路径和缓存路径

npm config set prefix "D:\learningsoftware\nodejs\node_global"

npm config set cache "D:\learningsoftware\nodejs\node_cache"

1.3 配置环境变量

1）新建变量 NODE_HOME，选择你的 nodejs 的 安装目录，
这里是 D:\learningsoftware\nodejs

2） path中的 原变量 D:\learningsoftware\nodejs 改为 %NODE_HOME%，

​ 并添加 node_global，node_cache 两个变量

​ %NODE_HOME%\node_global
​ %NODE_HOME%\node_cache

3）测试 npm install express -g

查看 node_global 下的 node_modules 下 是否有 express 目录生成

1.4 全局配置淘宝镜像 (管理员cmd)

​ 淘宝镜像：推荐
npm config set registry https://registry.npmmirror.com/
​ 华为镜像 :
npm config set registry https://repo.huaweicloud.com/repository/npm

温馨提示：
​ http://npm.taobao.org 和 http://registry.npm.taobao.org 将在 2022.06.30 号正式下线和停止 DNS 解析。
​ 新域名为 npmmirror.com, 相关服务域名切换规则请参考：

​ http://npm.taobao.org => http://npmmirror.com
​ http://registry.npm.taobao.org => http://registry.npmmirror.com

查看配置的镜像: npm config get registry
查看配置 npm config ls

2、安装配置 Vue

2.1 安装Vue 相关

1、使用 (管理员cmd) ，执行以下操作
npm install vue -g

2、全局安装webpack
npm install webpack -g

查看 node_global 下的 node_modules 下 是否有 webpack 目录生成
— 安装webpack-cli
npm install webpack-cli -g

3、安装vue 脚手架
npm install -g @vue/cli
输入vue --version，能输出版本号就说明安装好了。

4、安装vue-router
npm install vue-router -g

5、 最后一定要给Nodejs权限 (安装在c盘的请忽略)

2.2 解决报错问题

当使用 Vue-cli 创建项目时报错 （没有请忽略）

请按照一下解决方案：

PS E:\VueProject> Get-ExecutionPolicy
Restricted
PS E:\VueProject> Set-ExecutionPolicy -Scope  CurrentUser
位于命令管道位置 1 的 cmdlet Set-ExecutionPolicy
请为以下参数提供值:
ExecutionPolicy: RemoteSigned
PS E:\VueProject> Get-ExecutionPolicy
RemoteSigned
PS E:\VueProject>