VS-Code中Vue3-项目创建

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

VS-Code中Vue3-项目创建_第1张图片

2:Node.js的下载 

(1)百度搜索Node.js,点击第一个

VS-Code中Vue3-项目创建_第2张图片

(2)点进去之后下载左边的,点other Download,点Window Installer(.msi) 

VS-Code中Vue3-项目创建_第3张图片

VS-Code中Vue3-项目创建_第4张图片

3:npm 使用镜像

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

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

(1)win+r 输入cmd 打开命令提示符

VS-Code中Vue3-项目创建_第5张图片

(2)在命令行中编写

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

(3)输入完之后可以查询镜像是否导入

npm config get registry

VS-Code中Vue3-项目创建_第6张图片显示http://registty.npm.taobao.org/时说明npm的镜像已经存在

4:工程文件的创建

(1)创建一个做工程项目的文件夹

VS-Code中Vue3-项目创建_第7张图片(2)进入文件夹,在文件夹上方输入cmd 回车,进入本文件夹的命令窗口

VS-Code中Vue3-项目创建_第8张图片

VS-Code中Vue3-项目创建_第9张图片

(2)在命令行中输入

npm create vue@latest

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

(4)安装成功后会出现图下提示

VS-Code中Vue3-项目创建_第10张图片

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

VS-Code中Vue3-项目创建_第11张图片

按自己需求配置即可(也可如图所示)

(5)项目创建完成,用VS-Code打开执行以下命令

VS-Code中Vue3-项目创建_第12张图片

 5:VS-Code中需要的配置

(1)打开我们的项目文件夹后首先需要打开左上角终端,新建终端

VS-Code中Vue3-项目创建_第13张图片

新建终端后下方出现边框

VS-Code中Vue3-项目创建_第14张图片

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

VS-Code中Vue3-项目创建_第15张图片

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

npm install

VS-Code中Vue3-项目创建_第16张图片

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

npm run dev

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

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

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

(3). 执行测试并输出结果,以便更好地检测和修复错误。

显示下方网址运行成功

VS-Code中Vue3-项目创建_第17张图片

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

VS-Code中Vue3-项目创建_第18张图片

谢谢你的观看

你可能感兴趣的:(前端,npm,vue,node.js,html5,vue.js,node.js,npm,前端)