Vue-Cli(脚手架)安装及如何创建Vue-Cli项目-保姆级别教程,手把手教会你

文章目录

什么是Vue Cli
- Vue CLI，全称为 Vue Command Line Interface，是一个基于 Vue.js 进行快速开发的完整系统。它通过提供可选插件来增加项目的规模，同时还提供了创建向导式的用户界面，帮助我们快速生成一个 Vue.js 项目。
- - Vue CLI 的主要特点如下：
安装VUE Cli软件
- - 搭建开发环境
  - - 1.1.*安装Node.js
    - 1.2.配置npm源
2.安装 VUE Cli
3.创建工程
- - - 3.1通常使用Vue的命令来创建VUE CLI工程，并且，会将工程创建在执行命令时的位置，所以，先在命令
    - 3.2.启动服务
    - 3.3.停止服务
Idea中启动项目
- - 终止启动
补充:

什么是Vue Cli

Vue CLI，全称为 Vue Command Line Interface，是一个基于 Vue.js 进行快速开发的完整系统。它通过提供可选插件来增加项目的规模，同时还提供了创建向导式的用户界面，帮助我们快速生成一个 Vue.js 项目。

Vue CLI 的主要特点如下：

快速创建 Vue.js 项目的向导式用户界面：我们只需要按照界面上的步骤一步步操作，就可以快速创建一个 Vue.js 项目。
支持自定义配置：Vue CLI 提供了多种配置选项，开发者可以根据自己的需求进行选择和配置。
支持插件扩展：Vue CLI 支持插件化扩展，开发者可以根据需要安装插件，例如路由、状态管理等。
支持开箱即用的工具集成：Vue CLI 集成了很多实用的工具，例如 Babel、Webpack、ESLint 等。
总之，Vue CLI 是一个非常强大的工具，能够极大地提升 Vue.js 开发效率和开发体验，尤其适用于中大型项目的开发。

安装VUE Cli软件

搭建开发环境

1.1.*安装Node.js

首先需要下载Node.js安装包，下载地址可参考：

https://nodejs.org/dist/v16.14.2/node-v16.14.2-x64.msi
https://mirrors.nju.edu.cn/nodejs/latest-v16.x/node-v16.14.2-x64.msi
https://mirrors.tuna.tsinghua.edu.cn/nodejs-release/v16.14.2/node-v16.14.2-x64.msi

Node.js的安装过程没有特别的注意事项，整个安装过程中都可以不必修改任何内容，直至其自动安装完成。

$(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装1.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rn9bWPmN-1686279616882)(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装2.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2TFWUSGc-1686279616883)(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装3.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uaYsZBcu-1686279616884)(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装4.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N73NrXIV-1686279616885)(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装5.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f4rvteVF-1686279616885)(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装6.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sj4pXim-1686279616886)(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装7.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rBpv7C8S-1686279616888)(C:\Users\Administrator\Desktop\总结\VuE-Cli\安装8.png)]$

此安装包会自动配置环境变量，安装完成后，可检查npm命令是否可用，在操作系统的命令提示符下执

行以下命令即可：

npm -v

$外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-epLP4UCp-1686279616889)![(C:\Users\Administrator\Desktop\总结\VuE-Cli\npm版本.png)]$

**注意：**你必须在新的命令提示符窗口（安装完Node.js后再打开的窗口）中运行此命令。

1.2.配置npm源

nmp源（即npm仓库，称之为：registry）默认是境外服务器，在国内使用时，访问速度较慢，通常，在初次使用时，应该将npm源更换为国内的服务器地址，例如使用 https://registry.npmmirror.com作为npm源。

配置npm源的命令如下：

npm config set registry https://registry.npmmirror.com

当配置成功后，可通过 get 命令可查看npm源：

npm config get registry

**注意：**以上命令将显示当前生效的npm源，但并不检查npm源的URL是否有效，所以，即使配置了错误的npm源，也不会提示错误，请认真检查是否配置了正确的URL。
**注意：**无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符，并且，不要使用Power Shell，在Mac OS中，请使用 sudo来执行以上命令。

2.安装 VUE Cli

安装VUE Cli的命令如下：

npm install -g @vue/cli

此过程将从仓库服务器中下载VUE Cli，通常耗时30秒至5分钟左右。

**提示：**如果安装过程中的日志提示更新npm版本，或提示某些软件版本偏旧等，只要没有出现 ERROR字样，均可无视。
**注意：**以上操作仍需要管理权限才可以成功执行。安装完成后，可通过以下命令检验VUE Cli是否安装成功：

vue -V

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YKvjZisF-1686279616901)(C:\Users\Administrator\Desktop\总结\VuE-Cli\vue -V版本.png)]$

3.创建工程

3.1通常使用Vue的命令来创建VUE CLI工程，并且，会将工程创建在执行命令时的位置，所以，先在命令

提示符窗口中进入Vue Workspace（自行指定的用于存放项目的文件夹），例如（以下示例中的 # 开头是注释，不要执行）：

# 切换到D盘
d:
# 创建Vue的Workspace，文件夹名称为Vue-Workspace，是自定义名称
# 如果Vue的Workspace已经存在，则不需要执行接下来这条命令
# 如果使用IntelliJ IDEA开发VUE CLI工程，也可以直接使用IntelliJ IDEA的Workspace，无强制
要求
mkdir Vue-Workspace
# 进入D盘下的Vue-Workspace
cd Vue-Workspace

当进入Vue Workspace后，就可以创建工程了。

使用 vue create 命令即可创建VUE CLI工程，命令格式是：

vue create 工程名称

输入以上指令后，按下 Enter 键将准备创建工程，创建过程可能耗时较长，注意：不可反复按 Enter键，否则会自动选择后续各设置选项的默认项。
创建过程中会有一些选项，最先提示的选项是 Please pick a preset ，表示“请选择一个预设项”，推荐选择 Manually select features ，表示“手动选择”，通过键盘的上下箭头进行选择，选择到目标项后按下键盘的 Enter 键到下一步：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0jGhObs-1686279616902) $(C:\Users\Administrator\Desktop\总结\VuE-Cli\创建项目1.png)]$

接下来的选项是 Check the features needed for your project ，表示“选择你的工程中需要使用的功能”，推荐在列表中选择 Babel 、 Router 、 Vuex 这3项，使用键盘的上下箭头移动，使用空格选中或取消选中，选择完成后按下键盘的 Enter 键到下一步:

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ya2ioAAa-1686279616903)(C:\Users\Administrator\Desktop\总结\VuE-Cli\创建项目2.png)]$

接下来的选项是 Choose a version of Vue.js that you want to start the project with ，表示“选择你的工程中希望使用的Vue.js的版本”，推荐选择 2.x 这项，选择到目标项后按下键盘的 Enter键到下一步：
在这里插入图片描述

接下来的选项是 Use history mode for router ，表示“是否在路由中选择历史模式”，推荐选择“是”，输入 Y 后按下键盘的 Enter 键到下一步（提示信息中， Y 是大写的，表示它是默认选项，不输入Y 而直接按下 Enter 键是等效的）：

在这里插入图片描述

接下来的选项是 Where do you prefer placing config for Babel, ESLint, etc.? ，表示“你习惯把一些配置信息存放在哪里？”，推荐选择In package.json，即存放在 package.json 文件中，选择到目标项后按下键盘的 Enter 键到下一步:
在这里插入图片描述

最后的选项是 Save this as a preset for future projects? ，表示“是否保存以上配置信息，作为后续将创建的新工程的预设？”，推荐选择“否”，输入 N 后按下键盘的 Enter 键（提示信息中， N 是大写的，表示它是默认选项，不输入N而直接按下 Enter 键是等效的）:

至此，配置过程已经结束，接下来会自动创建工程，耗时取决于网络速度，通常需要30秒至5分钟左右。如果未出现 Error 字样，通常是创建成功了

3.2.启动服务

**注意：**从现在开始，你可以使用IntelliJ IDEA或类似的开发工具来打开你的项目，并使用内置的Terminal执行各个命令，使用方式与命令提示符窗口完全相同。进入工程目录，执行 npm run
serve 命令即可启动此工程的服务（过程中会编译打包此工程）：

npm run serve

当提示以下信息时，表示工程已成功启动：

在这里插入图片描述

当工程成功启动后，即可根据提示的URL在浏览器中进行访问：

在这里插入图片描述

3.3.停止服务

如果需要停止服务，在控制台使用Ctrl + C即可。
**提示：**当按下Ctrl + C后，会提示 "终止批处理操作吗(Y/N)?" ，其实，当按下Ctrl + C后，服务已经被停止，在此提示中无论选择 Y 或 N 结果都已经不重要了。

Idea中启动项目

在这里插入图片描述

终止启动

输入: Ctrl+c

在这里插入图片描述

补充:

启动之后一般不需要重启
- VUE Cli工程启动的服务支持热部署(热更新，即:当保存对源代码的修改后，会自动重新编译打包并覆盖原本已经启动的服务中的文件)，并没有重启服务的做法，如果在某些场景中需要实现“重启”的效果（例如修改服务端口等)，可以先停止服务，然后再次启动服务。
此服务默认占用8080端口，如果端口已经被占用，将自动修改端口为8081或继续向后递增端口号
如需手动修改端口号，在工程根目录下的package.json中修改scripts属性下serve的值:
vue-cli-service serve --port端口号
指定端口号:如需手动修改端口号，在工程根目录下的package.json中修改scripts属性下serve的值:
- vue-cli-service serve --port 端口号
- 提示:即使显式的指定了端口号，如果指定的端口仍被其它服务占用，仍会自动在指定端口号的值的基础上递增，以使用新的端口号!例如显式的指定了使用9090端口，如果9090被占用且9091可用时，会自动改为使用9091端口。