一、依赖环境简介
1、Node.js
- Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！
- Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。 这使 Node.js 表现得非常出色。
2、npm
- npm 是 Node.js 标准的软件包管理器。
在 2017 年 1 月时，npm 仓库中就已有超过 350000 个软件包，这使其成为世界上最大的单一语言代码仓库，并且可以确定几乎有可用于一切的软件包。 - 它起初是作为下载和管理 Node.js 包依赖的方式，但其现在也已成为前端 JavaScript 中使用的工具。
3、vue-cli
- CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令。它可以通过 vue create 快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。你也可以通过 vue ui 通过一套图形化界面管理你的所有项目。
二、安装依赖环境
1、安装Node.js
（1）进入nodejs中文站 下载，我的系统是64位，这里选择windows安装包（.msi）64位
（2）安装很简单，我这里默认一路next就行
（3）输入node -v命令查看是否安装完成
显示v14.18.0,代表我们已经安装成功了，此时的目录机构是这样的
2、安装npm
npm的本地仓库默认在系统盘c盘的用户目录了(没见到npm-cache是因为没有用过，一使用缓存目录就生成了)，仓库文件以后会很大，我们仓库移动回到D盘D:\nodejs
（1）先如下图建立2个目录
（2）把仓库切换到新建的目录中
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
（3）配置国内的镜像站，加快我们的下载速度
npm config set registry=http://registry.npm.taobao.org
（4）查看一下我们刚刚的三个配置
（5）测试一下新配置的镜像站里面有没有vue的信息,么有问题
npm info vue
（6）升级npm
注意：
此时，默认的模块C:\Program Files\nodejs\node_modules 目录
已经改变为D:\nodejs\node_global\node_modules 目录
需要做的操作：
-
需要修改原来的环境变量修改Path：
- 删掉 C:\Program Files\nodejs\node_modules
- 加上 D:\nodejs\node_global\node_modules
-
增加 NODE_PATH 内容是：D:\nodejs\node_global\node_modules
否则会导致执行的都是旧C:\Program Files\nodejs里的东西，切记！！！
注意，以下操作需要重新打开CMD让上面的环境变量生效
3、安装vue
npm install vue -g
这里的-g是指安装到global全局目录去
4、安装vue脚手架vue-cli
npm install vue-cli -g （2.x）
此时直接使用vue命令会报错，我们需要给vue配置环境变量
在Path环境变量中加入D:\nodejs\node_global
新打开一个cmd命令窗口 执行 vue -V,此时可以发现vue的命令已经生效了
5、升级vue-cli 3.x
# 卸载旧版本
vue uninstall -g vue-cli
# 安装新版本 3.x
npm install -g @vue/cli
如果vue的版本依然是旧版本，请检查环境变量Path中 node_global 的配置是否有多个
6、利用vue-cli脚手架初始化一个工程
假设我们把工程放到 D:\开发\代码\我的\vueProject里面
1.切换目录到D:\开发\代码\我的\vueProject
2.执行命令 vue init webpack vue01
cd D:\开发\代码\我的\vueProject
vue init webpack vue01
3.初始化依赖
cd vue01
npm install
npm run dev
