Vue cli脚手架的安装

cli脚手架的安装

1、安装 npm

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

2、查看全局的环境配置

npm config list 

其中：prefix=C:\Users\Administrator\AppData\Roaming\npm就是我们全局安装了哪些方法的地方。可以看到默认情况下npm全局模块的是存放在C盘的。我们需要将它其换到其他的盘里面去，（如果c盘的空间超过2T请忽略第2,3,4,5步）我们一般会将这默认的位置放在我们的node的安装位置，例如我的node是安装在了 E:\Rescource\node.js下面

3、在node的安装文件夹下创建文件

node_cache   // 用于存放node的缓存文件
node_global   // 用于存放node下载的模块的默认全局位置

4、配置环境变量

将node的安装路径和刚才创建的 node_global 的路径添加到环境变量path里面，结果如下

5、更改全局环境配置

在添加完path路径之后就是更改node的配置了，最有用就是将以后我们下载的全局模块都下载到我们更改的位置，命令如下：

npm config set prefix "E:\Rescource\node.js\node_global" 
npm config set cache "E:\Rescource\node.js\node_cache"

• node_global 是全部模块安装位置

• node_cache 是全局的缓存位置

==注意：如果你的命令是在微软自带的黑

注意：如果你的命令是在微软自带的黑窗口（也就是cmd）里面进行的命令输入，可以继续看下面的内容，并继续进行输入了。如果不是在黑窗口执行的命令，而是在其他软件里面打开的终端，那么在配置完环境变量之后请重启一下电脑在进行下面的操作。因为刚刚配置的环境变量是只有在黑窗口里面可以直接使用的，在其他地方（例如：vscode）是不能够使用的，必须重启电脑去更新环境变量才可以使用

6、安装 vue-cli

npm install -g @vue/cli
vue -V   //检测vuecli 是否安装成功   
//终端会返回 @vue/cli 4.5.12 之类的信息说明已经安装成功，版本号根据时间会有相应的变化

注意这里输入的V是大写的V

7、安装 webpack

webpack 是 JavaScript 打包器(module bundler)

npm install -g webpack
npm install -g webpack-cli
webpack -v   //检测webpack是否安装成功

在输入webpack -v有可能弹出来说需要安装一些东西,提示需要选择yes/no，这时候在终端输入yes，然后按下回车，等待下载完之后，关闭并重新打开终端。
再次输入 webpack -v 如果看到版本号说明已经下载成功。 注意： 这里输入的v是小写的v

webpack -v  //输入并按下回车
//终端返回的信息结果如下：
webpack 5.28.0
webpack-cli 4.6.0