---

此教程摘选自我的笔记：黑马JavaWeb开发笔记08——(保姆级Vue项目全部安装配置步骤)Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程，感兴趣的朋友可以移步此篇笔记。

1. Vue-cli脚手架安装

1. 在nodejs官网里面下载nodejs安装到本地
   
   双击.msi文件安装，选择好安装路径，安装路径不能有中文和空格，剩下的一直点击next就可以，他会自动配置
   

2. 验证nodejs环境变量
   NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功：命令行输入指令 node -v
   
   这里弹出版本号，就说明安装成功了

3. 配置npm的全局安装路径
   使用管理员身份运行命令行（我下载了一个PowerShell，没有的话直接主菜单点击终端管理员就行）
   
   或者：
   
   在命令行中，执行如下指令：npm config set prefix "你自己的nodejs安装路径"
   比如我安装在E盘的node.js文件夹中，那么我就应该输入如下命令：
   
   可以用npm config get prefix指令查看是否成功，成功会出现本机nodejs安装路径

4. 切换npm的淘宝镜像
   以管理员身份在命令行中执行指令：npm config set registry 最新淘宝镜像地址
   最新地址获取方式：直接在CSDN搜索栏搜索淘宝镜像最新地址，复制粘贴到指令即可。
   我这里执行指令：npm config set registry https://registry.npmmirror.com/
   

5. 安装Vue-cli
   使用管理员身份运行命令行，在命令行中，执行如下指令：npm install -g @vue/cli
   这个过程中，会联网下载，可能会耗时几分钟，耐心等待。
   
   安装完成后可以执行指令 vue --version来测试是否成功
   
   出现版本号就是成功了

至此，环境已经搭建完。

2. Vue项目创建(使用图形化界面创建步骤）

Vue-cli提供了如下2种方式创建vue项目:

• 命令行：直接通过命令行方式创建vue项目vue create vue-project01

• 图形化界面：通过命令先进入到图形化界面，然后再进行vue工程的创建vue ui

（这里演示用图形化界面的方式来创建）

1. 新建文件夹vue（取什么名字放在哪儿都可以，接下来创建的vue项目是要放在这里面的），打开文件夹，复制该目录地址
   

2. 以管理员身份打开终端，进入该目录下的命令行：cd 复制的地址，执行指令vue ui，然后会自动转跳到浏览器创建界面
   （这里一定一定要用管理员身份打开，不然会报错！！！）
   

3. 执行指令后，自动打开Vue项目管理器，直接创建新项目
   
   预设我们这里选择手动
   
   功能这里我们在默认的配置下只需要再把Router打开就可以，其他的不用修改
   
   配置中Vue版本选择2.x，语法检测规范选择第一个即可
   
   然后直接点击创建（再提醒一次，一定要用管理员身份打开命令行，然后转跳ui界面，不然这里会创建失败！！）

4. 创建成功
   
   此时我们最开始创建的文件夹vue里面已经有vue项目文件了：
   

5. 创建成功后这个ui界面可以直接关闭了，然后我们在vscode里面打开这个vue项目文件夹
   vscode打开文件方式：（要选择我们自己建立的那个文件夹vue）
   
   打开之后vscode是这个样子：
   
   至此，创建完成

3. Vue项目-运行

• 第一种方式：命令行方式
  直接基于cmd命令窗口，在vue目录下，执行输入命令 npm run serve 即可，如下图所示：
  
• 第二种方式：通过VS Code提供的图形化界面，如下图所示：

（注意：NPM脚本窗口默认不显示，可这里放一个我自己亲自试验有效的方法）

1. 通过设置->用户设置->扩展->MPM更改NPM默认配置
   勾选Enable Run From Folder
   
2. 然后重启VS Code，右击我们的项目名称，勾选npm脚本选项
   
3. 运行vue项目：
   
   在终端界面中，我们发现项目是运行在本地服务的8080端口，直接通过浏览器打开地址：
   出现此页面表示成功运行
   

4. Vue项目-配置端口

• 对于8080端口，经常被占用，所以需要修改默认的8080端口。

• 修改vue.config.js文件的内容，添加如下代码：
  

• 如下图所示，然后我们关闭服务器，并且重新启动，端口更改成功，可以通过浏览器访问7000端口来访问我们之前的项目
  

• 更改成功：
  
  至此，教程结束。

此教程摘选自我的笔记：黑马JavaWeb开发笔记08——(保姆级Vue项目全部安装配置步骤)Vue-cli脚手架安装、NodeJS环境搭建、Vue项目的创建、运行、端口修改、Vue开发流程，感兴趣的朋友可以移步此篇笔记。