VS-Code中Vue3-项目创建

1：Vue创建需要下载Node.js 

2：Node.js的下载 

（1）百度搜索Node.js，点击第一个

（2）点进去之后下载左边的，点other Download，点Window Installer（.msi） 

3：npm 使用镜像

npm 是一个广泛使用的 JavaScript 包管理工具。当你使用 npm 安装依赖包时，它默认会从 npm 的官方仓库（registry）下载包。然而，有时候由于网络问题或其他原因，从官方仓库下载可能会很慢或不稳定。

为了解决这个问题，你可以使用镜像（mirror）来加速 npm 的下载过程。镜像是一个替代的 npm 仓库，它保存了官方仓库的副本，但位于不同的服务器上，通常在地理位置上更接近你的位置，以提供更快的下载速度。

（1）win+r 输入cmd 打开命令提示符

（2）在命令行中编写

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

（3）输入完之后可以查询镜像是否导入

npm config get registry

显示http://registty.npm.taobao.org/时说明npm的镜像已经存在

4：工程文件的创建

（1）创建一个做工程项目的文件夹

（2）进入文件夹，在文件夹上方输入cmd 回车，进入本文件夹的命令窗口

（2）在命令行中输入

npm create vue@latest

也可以输入

npm create vite@latest 

 （3）会弹出Ok to proceed? (y)  我们可以输入y并回车进行安装

（4）安装成功后会出现图下提示

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

按自己需求配置即可（也可如图所示）

（5）项目创建完成，用VS-Code打开执行以下命令

 5：VS-Code中需要的配置

（1）打开我们的项目文件夹后首先需要打开左上角终端，新建终端

新建终端后下方出现边框

如果第一次打开下方可能出现的是PowerShell，我们需要点击选择默认配置文件改成cmd 

（2）接下来在下边输入命令行用于在项目中安装所需的依赖包。它会读取项目目录中的 "package.json" 文件，并从 npm registry 下载定义的依赖包。在项目中使用依赖包的代码之前，通常需要先运行 "npm install" 命令。 

npm install

安装等待完成后输入用于启动开发环境，从而可以开发和测试Web应用程序

npm run dev

nmp run dev命令通常会执行以下操作：

（1）. 安装和设置应用的依赖项和环境。

（2）. 启动一个本地开发服务器，通常包括实时重新加载和热模块替换功能，以便方便地进行修改和测试。

（3）. 执行测试并输出结果，以便更好地检测和修复错误。

显示下方网址运行成功

按ctrl+左单击进入网址，显示该界面，说明vue项目至此创建成功

谢谢你的观看