Vue-Cli(脚手架)安装步骤及如何创建Vue-Cli项目

一、先安装好，弄得，确定node已经安装好

https://blog.csdn.net/m0_65696193/article/details/141104049

按照“安装node能够执行运行js代码的软件”步骤，进行安装node。

更换nvm 安装版本：

完成安装node版本号，并可以随意更改版本号！！

二、安装 VUE Cli

已成功安装VUE Cli。

以下解释：

在react或者vue中安装包  遇到这样的错误 果断 切换成 淘宝的镜像源 就行！

 npm config set registry https://registry.npm.taobao.org

安装VUE Cli的命令如下：

npm install -g @vue/cli

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

**提示：**如果安装过程中的日志提示更新npm版本，或提示某些软件版本偏旧等，只要没有出现 ERROR字样，均可无视。

**注意：**以上操作仍需要管理权限才可以成功执行。

安装完成后，可通过以下命令检验VUE Cli是否安装成功：

vue -V

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 键到下一步：

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

接下来的选项是 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端口。