Vue3 -- 第一个vue项目

前言

根据某站的vue教学视频，看万卷教程不如敲万行代码，根据教学进度整理对应代码，更快的熟悉这门语言

流程

安装nodejs

这个是开发的前提，具体网上自己下载，安装完成后可以命令行查看版本，验证是否安装成功

npm -v

安装开发工具vsCode（推荐）

下载网站：https://code.visualstudio.com/

vite脚手架创建基础项目（省时间）

创建命令：

npm create vue@latest

命令执行后，会有很多的项目配置，按提示修改或者直接用默认的也行，大概可以参考以下，具体的可能会因为版本原因有所不同

## 1.创建命令
npm create vue@latest
## 2.具体配置
## 配置项目名称
√ Project name: vue3 test
##是否添加TypeScript支持
V Add TypeScript? Yes
##是否添加ISX支持
V Add isx Support? No
# 是否添加路由环境
V Add Vue Router for Single Page Application development? No
## 是否添加pinia环境
V Add Pinia for state management?
##是否添加单元测试
V Add Vitest for Unit Testing? No
#是否添加端到端测试方案
√ Add an End-to-End Testing Solution? ” No
##是否港加ESLint诺法检查
V Add ESLint for code quality? Yes
##是否添加Prettiert代码格式化
V Add Prettier for code formatting? No

可以看到上面也有参考命令

加载依赖

参考命令,有点像maven的加载依赖，不加载启动会报错，需要等一两分钟

npm i

运行启动命令

参考命令

npm run dev

验证

启动完成后可以看到对应的访问连接，浏览器访问即可
http://localhost:5173/

看到上面的页面，就恭喜你完成第一个vue项目，接着再慢慢了解代码吧