一文教你学会vue前端项目创建与开发

本篇文章主要讲解，vue3版本下的web应用创建、页面添加、路由配置及代理跨域的配置教程，通过本教程您可以快速掌握vue前端项目的开发工作。
作者：任聪聪 https://rccblogs.com
日期：2024年9月6日
教程附件：https://download.csdn.net/download/hj960511/89722638

一、准备工作

安装好node 并准备好如下环境图：

node官网：https://nodejs.org/zh-cn

安装node环境：

步骤一、打开我们的node官网，并点击下载如下图：

选择并下载msi文件如下图：

步骤二、打开msi文件，并持续下一步进行安装node

打开后：

点击next进入到下一个阶段：

持续下一步直到安装完成，完毕后即可获得一个node环境和自带的npm。

安装vue

如果vue没有安装则打开cmd执行如下命令即可完成vue的安装：

npm install -g @vue/cli

安装vscode

官网下载地址：https://code.visualstudio.com/ 用于我们本次学习使用的编程工具。

安装提示：下载后打开安装文件默认下一步即可完成安装操作。

二、创建一个vue项目

步骤一、打开我们的cmd并输入如下命令进入到一个我们需要创建项目的目录下：

输入：e:进入到e盘根目录，输入cd 你的目录即可进入到你期望的目录下。

步骤二、进入到目录下，即可进行vue项目的创建：

输入命令：

vue create vue-demo

进入到如下界面，选配我们的项目。

选择完毕后，按下回车即可，选择方式为按键的上下按钮。

等待初始化安装完毕…

步骤三、运行我们的初始化应用：

输入命令：npm run server

浏览器输入路径并打开。

三、构建我们的web项目

说明：给我们的web项目安装所需的依赖，并进行相应的导入及文件配置。

步骤一、打开我们的vscode

选择打开文件夹，并选择我们创建的vue项目目录，如下图：