如何启动一个vue3的项目

搭建vue开发环境

  1. 安装node.js
  2. cd到项目目录下
  3. npm run serve

Node.js下载与安装(npm)

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。

  • 要检查 node js 的安装版本

node -v

image-20240116201816783

要检查 npm,请运行以下命令:

npm -v

image-20240116201900325

若发现没有安装,可以在官网:https://nodejs.org/en

image-20240116201956593

双击下载继续继续,同意安装后完成。

安装Vue CLI

那么,什么是 Vue CLI?

Vue CLI是一个官方的 vue npm 包,可让您在计算机上快速创建 vue 项目。

让我们全局安装,这样就可以在电脑的任何地方创建vue项目。

打开终端窗口并运行 以下命令

npm install -g @vue/cli

安装后可使用如下命令检查版本:

vue --version

image-20240116202212661

如果您已经安装,但是版本低于4.5,可以使用如下命令进行升级:

npm upgrade --next

image-20240116202307055

创建Vue3项目

首先,打开一个你想存放此项目的文件夹,右击进入cmd:

image-20240116203123444

后输入:

vue create project-name

image-20240116204159519

后进行一些版本等选择,可使用键盘的上下键头来选择vue3,然后摁enter来进行选择

image-20240116203221880

进行项目创建:

image-20240116203414187

完成后回到文件夹,可看到我们当时创建的vue3的项目

image-20240116204103553

image-20240116204301691

运行项目

接下来,我们使用VS来运行项目

image-20240116204508276

附上vs code的官网链接:https://code.visualstudio.com/

image-20240116204551179

下载后双击,继续继续下载完成!!

我们点开软件:

image-20240116204739739

image-20240116204752883

我们选择文件夹,点击后项目就导入啦!!

接下来,我们将终端打开:

image-20240116204942670

输入命令:

npm run serve

image-20240116205027292

运行结束后:

image-20240116205100578

得到了两个:一个是 localhost,另一个是网络 URL,当您想在多个设备上查看项目(例如在手机上查看项目)时,这非常有用。

可以ctrl+鼠标左击,打开此项目:

image-20240116205157724

至此,vue3项目启动完成!!

Logo

前往低代码交流专区

更多推荐