本篇文章主要讲解,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项目目录,如下图:
点击确认进入下一步骤。