Vue-Cli安装和配置（全）

小鱼儿 2023-09-29 20:07 3阅读 0赞

Vue-cli是Vue的脚手架，类似Java中的SpringBoot框架，用于搭建一个标准的项目。 Vue-cli大大降低了webpack的使用难度，支持热部署，有webpack-dev-server的支持，相当于启动了一个请求服务器作为测试环境，我们只关注开发就可以了。

**目录**

安装和配置

安装Node.js

npm工具

npm配置国内镜像（淘宝镜像）

nrm工具

安装Vue-Cli

可能出现的问题

vue无法加载文件C:\\Users\\Administrator\\AppData\\Roaming\\npm\\vue.ps1因为在此系统上禁止运行脚本……解决办法

无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

--------------------

## 安装和配置 ##

#### 安装Node.js ####

官网：[Node.js][]

Node下载（[Download | Node.js][Download _ Node.js]）

安装后配置环境变量：在Path中添加NodeJS的全局安装路径：

![13966524718a4131be187a4d05ffee71.png][]

检查是否安装成功：在命令行输入**npm -v** 如果安装成功，会显示版本号

![8ba60e1dcc144171a0d3fdbeeeead53b.png][]

#### npm工具 ####

NodeJS的包管理工具，类似Maven，安装Node.js后就有了 基本命令：

> npm -v 查看版本
> 
> npm install 包名 --save 安装 可简写成npm i 包名 -s
> 
> npm uninstall 包名 --save 卸载
> 
> npm run serve 运行项目
> 
> npm build 项目打包
> 
> npm list --depth=0 -global 查看已经全局安装的模块
> 
> 如果不是最新版本，运行指令
> 
> npm install -g npm
> 
> 如果想更新到指定版本，运行指令
> 
> npm -g install npm@6.8.0

PS： -s是安装到当前目录，-g是安装到全局

#### npm配置国内镜像（淘宝镜像） ####

npm是node.js库的包管理工具，因为镜像地址在国外，安装库会比较慢，可以将镜像地址修改为国内地址，来提供安装库的速度。配置国内镜像命令如下：

// npm配置淘宝镜像
    npm config set registry https://registry.npm.taobao.org
     
    // 查看npm镜像是否配置成功
    npm config get registry
     
    // npm回复镜像
    npm config delete register
    npm config edit
     
    // npm安装cnpm，使用cnpm来安装js库
    npm install -g cnpm --registry=https://registry.npm.taobao.org

#### nrm工具 ####

npm默认站点在国外，配置国内镜像，提高下载速度

> npm install nrm -g 安装nrm
> 
> nrm ls 查看镜像
> 
> nrm use 镜像名 使用镜像

![fda4ce996cab44fd9cefd750d582062c.png][]

也可以使用淘宝镜像：

> npm install -g cnpm –registry=[https://registry.npm.taobao.org][https_registry.npm.taobao.org]

#### 安装Vue-Cli ####

> npm install -g @vue/cli
> 
> vue --version

![0e2ae5d2c20243e0a898307ae3474f6c.png][]

### 可能出现的问题 ###

#### vue无法加载文件C:\\Users\\Administrator\\AppData\\Roaming\\npm\\vue.ps1因为在此系统上禁止运行脚本……解决办法 ####

管理员身份运行[PowerShell][]（[命令提示符][Link 1]，来源于Linux的命令提示符也叫Shell）

右键开始

![8436f1dbfb9d4f6082bb17dd155a8a21.png][]

执行：set-ExecutionPolicy RemoteSigned （签名或运行这些脚本）

set-ExecutionPolicy RemoteSigned

![f1e4aa173f1849db84e84e6f8e4aafd2.png][]

#### 无法将“node.exe”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 ####

1 去C盘查看用户下npm里是否有node.exe文件 ，大概路径

> C:\\Users\\29412\\AppData\\Roaming\\npm

2 如果少了node.exe，找到node安装路径目录，复制node.exe文件到上面文件路径下，重启即可

![8bdba91e6251460ab3a80ce268473c2b.png][]

#### npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称 ####

npm list --depth=0 -global   查看已经全局安装的模块

如果全局安装的模块中没有npm 则重新安装

npm -g install npm@6.13.4
    
    或者
    
    npm install npm@指定版本 -g

![75b0835d5c044f0e94205e4b16588bfb.png][]

### **如果出现一些依赖无法找到的问题，解决办法最好就是将以前能运行的项目中node\_modules文件夹复制进来,并且复制package.json文件** ###

[Node.js]: https://nodejs.org/zh-cn/
[Download _ Node.js]: https://nodejs.org/en/download/
[13966524718a4131be187a4d05ffee71.png]: https://img-blog.csdnimg.cn/13966524718a4131be187a4d05ffee71.png
[8ba60e1dcc144171a0d3fdbeeeead53b.png]: https://img-blog.csdnimg.cn/8ba60e1dcc144171a0d3fdbeeeead53b.png
[fda4ce996cab44fd9cefd750d582062c.png]: https://img-blog.csdnimg.cn/fda4ce996cab44fd9cefd750d582062c.png
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org
[0e2ae5d2c20243e0a898307ae3474f6c.png]: https://img-blog.csdnimg.cn/0e2ae5d2c20243e0a898307ae3474f6c.png
[PowerShell]: https://so.csdn.net/so/search?q=PowerShell&spm=1001.2101.3001.7020
[Link 1]: https://so.csdn.net/so/search?q=%E5%91%BD%E4%BB%A4%E6%8F%90%E7%A4%BA%E7%AC%A6&spm=1001.2101.3001.7020
[8436f1dbfb9d4f6082bb17dd155a8a21.png]: https://img-blog.csdnimg.cn/8436f1dbfb9d4f6082bb17dd155a8a21.png
[f1e4aa173f1849db84e84e6f8e4aafd2.png]: https://img-blog.csdnimg.cn/f1e4aa173f1849db84e84e6f8e4aafd2.png
[8bdba91e6251460ab3a80ce268473c2b.png]: https://img-blog.csdnimg.cn/8bdba91e6251460ab3a80ce268473c2b.png
[75b0835d5c044f0e94205e4b16588bfb.png]: https://img-blog.csdnimg.cn/75b0835d5c044f0e94205e4b16588bfb.png