![cover](https://img-blog.csdnimg.cn/direct/1df055515139461482379de308014a25.png)
VS-Code中Vue3-项目创建
本文适合作为新手小白创建vue项目时的参考,包含了node.js,npm以及npm镜像,vue的使用,谢谢换看
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项目至此创建成功
谢谢你的观看
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)